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出 版 说明 


随 着 我 国 改革 开放 的 进一步 深化 ,高 等 教育 也 得 到 了 快速 发 展 ,各 地 高 校 紧 密 结合 地 方 
经 济 建设 发 展 需要 ,科学 运用 市 场 调节 机 制 , 加 大 了 使 用 信息 科学 等 现代 科学 技术 提升 、 改 
造 传 统 学 科 专 业 的 投入 力度 ,通过 教育 改革 合理 调整 和 配置 了 教育 资源 ,优化 了 传统 学 科 专 
业 ,积极 为 地 方 经 济 建设 输送 人 才 , 为 我 国 经 济 社会 的 快速 、 健 康 和 可 持续 发 展 以 及 高 等 教 
育 自身 的 改革 发 展 做 出 了 巨大 贡献 。 但 是 ,高 等 教育 质量 还 需要 进一步 提高 以 适应 经 济 社 
会 发 展 的 需要 ,不 少 高 校 的 专业 设置 和 结构 不 尽 合理 ,教师 队伍 整体 素质 吕 待 提高 ,人 才 培 
养 模式 .教学 内 容 和 方法 需要 进一步 转变 ,学 生 的 实践 能 力 和 创新 精神 牙 待 加 强 。 

教育 部 一 直 十 分 重视 高 等 教育 质量 工作 。2007 年 1 月 ,教育 部 下 发 了 《关于 实施 高 等 
学 校本 科教 学 质量 与 教学 改革 工程 的 意见 》, 计 划 实 施 “ 高 等 学 校本 科教 学 质量 与 教学 改革 
工程 (简称 “质量 工程 ')”, 通 过 专业 结构 调整 .课程 教材 建设 、 实 践 教学 改革 ,教学 团队 建设 
等 多 项 内 容 , 进 一 步 深化 高 等 学 校 教 学 改革 ,提高 人 才 培 养 的 能 力 和 水 平 ,更 好 地 满足 经 济 
社会 发 展 对 高 素质 人 才 的 需要 。 在 贯彻 和 落实 教育 部 “质量 工程 ”的 过 程 中 ,各 地 高 校 发 挥 
师资 力量 强 、 办 学 经 验 丰 富 、 教 学 资源 充裕 等 优势 ,对 其 特色 专业 及 特色 课程 ( 群 ) 加 以 规划 、 
整理 和 总 结 ,更 新 教学 内 容 、 改 革 课 程 体系 ,建设 了 一 大 批 内 容 新 、 体 系 新 、 方 法 新 、 手 段 新 的 
特色 课程 。 在 此 基础 上 ,经 教育 部 相关 教学 指导 委员 会 专家 的 指导 和 建议 ,清华 大 学 出 版 社 
在 多 个 领域 精 选 各 高 校 的 特色 课程 ,分 别 规划 出 版 系列 教材 ,以 配合 “质量 工程 ”的 实施 , 满 
足 各 高 校 教学 质量 和 教学 改革 的 需要 。 

为 了 深入 贯彻 落实 教育 部 (关于 加 强 高 等 学 校本 科教 学 工作 ,提高 教学 质量 的 若干 意 
见 ) 精 神 ,紧密 配合 教育 部 已 经 启动 的 “高 等 学 校 教学 质量 与 教学 改革 工程 精品 课程 建设 工 
作 ”, 在 有 关 专 家 、 教 授 的 倡议 和 有 关 部 门 的 大 力 支持 下 ,我 们 组 织 并 成 立 了 “清华 大 学 出 版 
社 教材 编审 委员 会 "(以 下 简称 * 编 委 会 ”) , 旨 在 配合 教育 部 制定 精品 课程 教材 的 出 版 规划 ， 
讨论 并 实施 精品 课程 教材 的 编写 与 出 版 工作 。“ 编 委 会 成 员 皆 来 自 全 国 各 类 高 等 学 校 教学 
与 科研 第 一 线 的 骨干 教师 ,其 中 许多 教师 为 各 校 相关 院 、 系 主管 教学 的 院 长 或 系 主任 。 

按照 教育 部 的 要 求 ,“ 编 委 会 一致 认为 ,精品 课程 的 建设 工作 从 开始 就 要 坚持 高 标准 、 
严 要 求 ,处 于 一 个 比较 高 的 起 点 上 ; 精品 课程 教材 应 该 能 够 反映 各 高 校 教学 改革 与 课程 建 
设 的 需要 ,要 有 特色 风格 有 创新 性 (新 体系 、 新 内 容 、 新 手段 ,新 思路 ,教材 的 内 容 体 系 有 和 较 
高 的 科学 创新 ,技术 创新 和 理念 创新 的 含量 )、 先 进 性 (对 原 有 的 学 科 体系 有 实质 性 的 改革 和 
发 展 ,顺应 并 符合 21 世纪 教学 发 展 的 规律 ,代表 并 引领 课程 发 展 的 趋势 和 方向 ) 、 示 范 性 ( 教 
材 所 体现 的 课程 体系 具有 较 广泛 的 辐射 性 和 示范 性 ) 和 一 定 的 前 脆性 。 教材 由 个 人 申报 或 
各 校 推荐 (通过 所 在 高 校 的 “ 编 委 会 "成员 推荐 ) ,经 “ 编 委 会 ”认真 评审 ,最 后 由 清华 大 学 出 版 
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社 审定 出 版 。 
目前 ,针对 计算 机 类 和 电子 信息 类 相关 专业 成 立 了 两 个 * 编 委 会 ”, 即 “清华 大 学 出 版 社 
计算 机 教材 编审 委员 会 ”和 ”清华 大 学 出 版 社 电 子 信息 教材 编审 委员 会 ”>。 推 出 的 特色 精品 


教材 包括 : 

(1) 21 世纪 高 等 学 校规 划 教材 * 计算 机 应 用 一 一 高 等 学 校 各 类 专业 ,特别 是 非 计算 机 
专业 的 计算 机 应 用 类 教材 。 

(2) 21 世纪 高 等 学 校规 划 教材 ， 计算 机 科学 与 技术 一 高 等 学 校 计算 机 相关 专业 的 
教材 。 


(3) 21 世纪 高 等 学 校规 划 教材 。 电子 信息 一 一 高 等 学 校 电子 信息 相关 专业 的 教材 。 
(4) 21 世纪 高 等 学 校规 划 教材 "软件 工程 一 一 高 等 学 校 软件 工程 相关 专业 的 教材 。 
(5) 21 世纪 高 等 学 校规 划 教 材 。 信息 管理 与 信息 系统 。 

(6) 21 世纪 高 等 学 校规 划 教材 。 财经 管理 与 应 用 。 

(7) 21 世纪 高 等 学 校规 划 教材 。 电子 商务 。 

(8) 21 世纪 高 等 学 校规 划 教材 。 物 联 网 。 


清华 大 学 出 版 社 经 过 三 十 多 年 的 努力 ,在 教材 尤其 是 计算 机 和 电子 信息 类 专业 教材 出 
版 方面 树立 了 权威 品牌 ,为 我 国 的 高 等 教育 事业 做 出 了 重要 页 献 。 清 华 版 教材 形成 了 技术 
准确 、 内 容 严谨 的 独特 风格 ,这 种 风格 将 延续 并 反映 在 特色 精品 教材 的 建设 中 。 


清华 大 学 出 版 社 教材 编审 委员 会 
联系 人 : 魏 江 江 


E-mail: weijj(@tup. tsinghua. edu. cn 


随 着 互联 网 从 Web 1.0 发 展 到 Web 2.0, 网 站 也 在 静态 页 面 (用 户 使 用 网 站 的 行为 也 
以 浏览 为 主 ) 的 基础 上 添加 了 各 种 桌面 软件 ,使 网 页 不 再 只 是 承载 单一 的 文字 和 图 片 , 各 种 
富 媒体 让 网 页 的 内 容 更 加 生动 ,网 页 上 软件 化 的 交互 形式 为 用 户 提供 了 更 好 的 使 用 体验 ,这 
些 都 是 基于 前 端 技术 实现 的 ,其 中 包括 CSS.HTML .DOM、Ajax JavaScript 等 。 

Web 前 端 开发 是 一 个 很 特殊 的 领域 ,涵盖 的 知识 面 非常 广 , 既 有 具体 的 技术 ,也 有 抽象 
的 理念 。 简 单 地 说 , 它 的 主要 职能 就 是 把 网 站 的 界面 更 好 地 呈现 给 用 户 。Web 前 端 开发 工 
程 师 除了 要 具有 良好 的 团队 合作 精神 以 外 ,还 要 有 不 断 学 习 的 目标 ,在 知识 层面 上 包括 从 最 
初 的 Photoshop、Flash、Dreamweaver 到 现在 常用 的 HTML、CSS、JavaScript、Ajax 等 技术 。 
本 书 最 真实 地 贴近 Web 前 端 工程 师 的 岗位 需求 ,从 基础 知识 抓 起 ,理论 与 实践 相 结合 ,在 注 
重 基础 理论 讲解 的 同时 加 强 对 动手 能 力 的 训练 。 

本 书 共 分 五 大 部 分 ,第 一 部 分 只 包括 1 章 , 是 对 Web 知识 的 整体 叙述 ; 第 二 部 分 是 
Photoshop 部 分 ,对 Photoshop 进行 了 详细 讲解 ; 第 三 部 分 是 Flash 部 分 ,对 Flash 的 常用 
知识 进行 了 讲解 ,包括 工具 箱 的 使 用 .动画 的 制作 ; 第 四 部 分 是 HTML 十 CSS 部 分 ,对 
HTML 语言 .CSS 用 于 网 页 美化 及 布局 进行 了 详细 的 讲解 ; 第 五 部 分 是 JavaScript, 包 括 
JavaScript 和 Ajax、jQuery, 对 网 页 的 前 端 技术 进行 了 讲解 。 

本 书 由 在 校 的 相关 专业 教师 编著 ,其 中 ,第 1 一 5 章 由 唐 哲 婴 编 写 , 第 6、7 章 由 单 莹 莹 编 
写 ,第 8、9、11、12 章 由 王 丽 铭 编 写 ,第 13、15 章 由 刘 志 凯 编写 ,第 14 章 由 郭 馈 编 写 ,第 10 章 
由 王 金 伟 编写 。 这些 教师 都 在 学 校 从 事 最 基础 的 Web 开发 课程 的 讲解 ,同时 具有 企业 开发 
的 经 验 , 对 Web 前 端 有 自己 的 认识 和 理解 。 希 望 这 些 知 识 对 在 校 学 生 、 想 从 事 Web 前 端 开 
发 的 读者 有 一 定 的 指导 和 帮助 作用 。 

由 于 编者 的 能 力 有 限 ,本 书 还 有 很 多 不 足 之 处 , 敬 请 广大 读者 给 予 指正 。 


编 者 
2015 年 10 月 
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Web 前 端 开发 技术 概述 | 
本 章 学 习 目标 ， 


名 了 解 Web 的 起 源 与 发 展 。 
名 了 和 解 Web 前 端 工 程 师 的 岗位 需求 。 
名 掌握 Web 前 端 开发 需要 的 技术 和 相关 工具 。 


G1 Web 概述 


Web 的 本 意 是 “ 蜂 蛛 网 "和 “网 ”, 在 网 页 设计 中 被 称 为 网页”, 表 现 为 3 种 形式 , 即 超 文 
本 (Hypertext) 、 超 媒体 (Hypermedia) 、 超 文本 传输 协议 (HTTP)。 


1.1.1 Web 的 起 源 


最 早 的 网 络 构想 可 以 追溯 到 1980 年 蒂 姆 。 伯 纳 斯 - 李 构 建 的 ENQUIRE 项 目 ,这 是 一 
个 类 似 维基 百科 的 超 文本 在 线 编辑 数据 库 。 尽 管 这 与 万 维 网 大 不 相同 ,但 是 它们 有 许多 相 
同 的 核心 思想 ,甚至 还 包括 一 些 伯 纳 斯 - 李 的 万 维 网 之 后 的 下 一 个 项 目 “ 语 义 网 ”中 的 构想 。 

1989 年 3 月 , 伯 纳 斯 - 李 扎 写 了 《关于 信息 化 管理 的 建议 ) 一 文 ,文中 提 及 ENQUIRE 并 
且 描 述 了 一 个 更 加 精巧 的 管理 模型 。1990 年 11 月 12 日 ,他 和 罗伯特 。 卡 里 奥 (Robert 
Cailliau) 合 作 提 出 了 一 个 更 加 正式 的 关于 万 维 网 的 建议 。1990 年 11 月 13 日 ,他 在 一 个 
NeXT 工作 站 上 写 了 第 一 个 网 页 以 实现 他 文中 的 想法 。 

在 那 年 的 圣诞 假期 , 伯 纳 斯 - 李 制 作 了 一 个 网 络 工作 必须 的 工具 一 一 第 一 个 万 维 网 浏览 
器 (同时 也 是 编辑 器 ) 和 第 一 个 网 页 服务 器 。 

1991 年 8 月 6 日 ,他 在 alt. hypertext 新 闻 组 上 贴 了 关于 万 维 网 项 目 简介 的 文章 ,这 一 
天 也 标志 着 因特网 上 万 维 网 公共 服务 的 首次 亮相 。 

万 维 网 中 至 关 重 要 的 概念 一 一 超 文本 起 源 于 20 世纪 60 年 代 的 几 个 项 目 。 例 如 泰 德 。 
尼尔森 (Ted Nelson) 的 仙 那 都 项 目 (Project Xanadu) 和 道格拉斯 。 英 格 巴特 (Douglas 
Engelbart) 的 NLS, 而 这 两 个 项 目的 灵感 都 来 源 于 万 尼 瓦 尔 。 布什 在 其 1945 年 的 论文 (和 
我 们 想 得 一 样 ) 中 为 微缩 胶片 设计 的 “记忆 延伸 ”(memex) 系统。 

蒂 姆 。 伯 纳 斯 - 李 的 另 一 个 才华 横 溢 的 突破 是 将 超 文本 嫁接 到 因特网 上 。 在 他 的 《编织 
网 络 ) 一 书 中 ,他 解释 说 他 曾 一 再 向 这 两 种 技术 的 使 用 者 们 建议 它们 的 结合 是 可 行 的 ,但 是 
却 没有 任何 人 响应 他 的 建议 ,最 后 他 只 好 自己 解决 了 。 他 发 明了 一 个 全 球 网 络 资源 唯一 认 
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证 的 系统 一 一 统一 资源 标识 符 。 

万 维 网 和 其 他 超 文本 系统 有 很 多 不 同 之 处 : 

第 一 ,万 维 网 上 需要 单 向 连接 而 不 是 双向 连接 ,这 使 得 任何 人 可 以 在 资源 拥有 者 不 做 任 
何 行动 的 情况 下 链接 该 资源 。 和 早期 的 网 络 系统 相 比 ,这 一 点 对 于 减少 实现 网 络 服务 器 和 
网 络 浏览 器 的 困难 至 关 重 要 , 它 的 副作用 是 产生 了 坏 链 的 慢性 问题 。 

第 二 ,万 维 网 不 像 某 些 应 用 软件 (如 HyperCard) , 它 不 是 私有 的 ,这 使 得 服务 器 和 客户 
端 能 够 独立 地 发 展 和 扩展 , 且 不 受 许可 限制 。 

1993 年 4 月 30 日 ,欧洲 核子 研究 组 织 宣布 万 维 网 对 任何 人 免费 开放 ,并 不 收取 任何 费 
用 。 两 个 月 之 后 ,Gopher 宣布 不 再 免费 ,造成 大 量 用 户 从 Gopher 转向 万 维 网 。 

万 维 网 联盟 (World Wide Web Consortium,W3C) 又 称 W3C 理事 会 ,1994 年 10 月 在 麻 
省 理工 学 院 计算 机 科学 实验 室 成 立 ,建立 者 是 万 维 网 的 发 明 者 蒂 姆 ， 伯 纳 斯 - 李 。 


1.1.2 ”Web 技术 


Web 是 一 种 典型 的 分 布 式 应 用 架构 。Web 应 用 中 的 每 一 次 信息 交换 都 要 涉及 客户 端 
和 服务 端 两 个 层面 ,因此 Web 开发 技术 大 体 上 也 可 以 被 分 为 客户 端 技术 和 服务 端 技术 两 
大 类 。 


1. 客户 端 技术 


1) HTML 语言 的 诞生 

Web 客户 端的 主要 任务 是 展现 信息 内 容 .HTML 语言 是 信息 展现 的 最 有 效 的 载体 之 
一 。 作 为 一 种 实用 的 超 文本 语言 ,HTML 的 历史 最 早 可 以 追溯 到 20 世纪 40 年 代 。1969 年 ， 
IBM 公司 的 Charles Goldfarb 发 明了 可 用 于 描述 超 文本 信息 的 GML 语言 。 从 1978 到 
1986 年 ,在 ANSI 等 组 织 的 努力 下 ,GML 语言 进一步 发 展 成 为 著名 的 SGML 语言 标准 。 当 
带 姆 。 伯 纳 斯 - 李 在 1989 年 试图 创建 一 个 基于 超 文本 的 分 布 式 应 用 系统 时 意识 到 ,SGML 
过 于 复杂 ,不 利于 信息 的 传递 和 解析 。 于 是 , 蒂 姆 。 伯 纳 斯 - 李 对 SGML 语言 做 了 大 刀 阔 径 
的 简化 和 完善 。1990 年 ,第 一 个 图 形 化 的 Web 浏览 器 * World Wide Web” 终 于 可 以 使 用 一 
种 为 Web 度 身 定制 的 语言 一 一 HTML 来 展现 超 文 本 信息 了 。 

2) 从 静态 信息 到 动态 信息 

最 初 的 HTML 语言 只 能 在 浏览 器 中 展现 静态 的 文本 或 图 像 信息 ,随后 由 静态 技术 向 
动态 技术 逐步 转变 。Web 出 现 后 ,GIF 第 一 次 为 HTML 页 面 引 入 了 动感 元 素 。1995 年 ， 
Java 语言 的 问世 带 来 了 更 大 的 变革 。Java 语言 天 生 就 具备 平台 无 关 的 特点 ,让 人 们 一 下 子 
找到 了 在 浏览 器 中 开发 动态 应 用 的 捷径 。CSS 和 DHTML 技术 真正 让 HTML 页 面 又 栈 又 
炫 动感 无 限 起 来 。1997 年 ,Microsoft 公司 发 布 了 IE 4. 0, 并 将 动态 HTML 标记 .CSS 和 
动态 对 象 模型 发 展 成 了 一 套 完 整 , 实 用、 高 效 的 客户 端 开发 技术 体系 ,Microsoft 称 其 为 
DHTML。 同 样 是 实现 HTML 页 面 的 动态 效果 ,DHTML 技术 无 须 启 动 Java 虚拟 机 或 其 
他 脚本 环境 ,可 以 在 浏览 器 的 支持 下 获得 更 好 的 展现 效果 和 更 高 的 执行 效率 。 

为 了 在 HTML 页 面 中 实现 音频 、 视 频 等 更 加 复杂 的 多 媒体 应 用 ,又 引入 了 对 
QuickTime 插件 的 支持 ,插件 这 种 开发 方式 迅速 风靡 了 浏览 器 的 世界 ,还 有 20 世纪 90 年 代 
中 期 刚刚 问世 的 COM 和 ActiveX 也 十 分 流行 。Real Player 插件 .Microsoft 自己 的 媒体 播 
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放 插 件 Media Player 也 被 预 装 到 了 各 种 Windows 版 本 之 中 ,随后 Flash 插件 走 人 了 人 们 的 
视线 。 


2. 服务 端 技术 


与 客户 端 技术 从 静态 向 动态 的 演进 过 程 类 似 , Web 服务 端的 开发 技术 也 是 由 静态 向 动 

最 早 的 Web 服务 器 简单 地 响应 浏览 器 发 来 的 HTTP 请 求 , 并 将 存储 在 服务 器 上 的 
HTML 文件 返回 给 浏览 器 。 

第 一 种 真正 使 服务 器 能 根据 运行 时 的 具体 情况 动态 生成 HTML 页 面 的 技术 是 大 名 鼎 
鼎 的 CGI 技术 ,CGI 技术 允许 服务 端的 应 用 程序 根据 客户 端的 请 求 动态 生成 HTML 页 面 ， 
这 使 客户 端 和 服务 端的 动态 信息 交换 成 为 了 可 能 。 

早期 的 CGI 程序 大 多 是 编译 后 的 可 执行 程序 ,其 编程 语言 可 以 是 C、C++、Pascal 等 任 
何 通 用 的 程序 设计 语言 。 为 了 简化 CGI 程序 的 修改 、 编 译 和 发 布 过 程 , 人 们 开始 探寻 用 脚 
本 语言 实现 CGI 应 用 的 可 行 方 式 。 

1994 年 ,人 们 发 明了 专用 于 Web 服务 端 编程 的 PHP 语言 。PHP 语言 将 HTML 代码 
和 PHP 指令 合成 为 完整 的 服务 端 动态 页 面 , 可 以 用 一 种 更 加 简便 、 快 捷 的 方式 实现 动态 
Web 功能 。1996 年 ,Microsoft 公司 在 其 Web 服务 器 IIS 3.0 中 引入 了 ASP 技术 ,ASP 使 
用 的 脚本 语言 是 用 户 熟 悉 的 VBScript 和 JavaScript。1998 年 ,JSP 技术 诞生 。 

随后 ,XML 语言 及 相关 技术 成 为 主流 。XML 语言 对 信息 的 格式 和 表达 方法 做 了 最 大 
程度 的 规范 ,应 用 软件 可 以 按照 统一 的 方式 处 理 所 有 XML 信息 ,这 样 一 来 ,信息 在 整个 
Web 世界 里 的 共享 和 交换 就 有 了 技术 上 的 保障 。HTML 语言 关心 的 是 信息 的 表现 形式 ， 
而 XML 语言 关心 的 是 信息 本 身 的 格式 和 数据 内 容 。 


1.1.3 Web 技术 的 发 展 
1. Web 技术 发 展 的 第 一 阶段 一 静态 技术 阶段 


本 阶段 的 Web 主要 是 静态 的 Web 页 面 。 在 这 个 阶段 ,HTML 语言 就 是 Web 向 用 户 
展示 信息 的 最 有 效 的 载体 。HTML 的 全 称 是 超 文 本 标记 语言 (Hypertext Markup 
Language) , 它 通 过 提供 超 文 本 格式 的 信息 在 客户 端的 用 户 机 上 显示 出 完整 的 页 面 。Web 
及 务 器 使 用 HTTP(Hypertext Transport Protocol, 超 文本 传输 协议 ) 将 HTML 文档 从 
Web 服务 器 传输 到 用 户 的 Web 浏览 器 上 。 

在 本 阶段 ,由 于 受 HTML 语言 和 旧式 浏览 器 的 制约 ,Web 页 面 只 包含 静态 的 文本 和 图 
像 信息 ,限制 了 资源 共享 ,这 个 现象 越 来 越 不 能 满足 人 们 对 信息 多 样 性 和 及 时 性 的 要 求 。 而 
这 一 阶段 的 Web 服务 器 基本 上 只 是 一 个 HTTP 的 服务 器 , 它 负责 接收 客户 端 浏览 器 的 访 
问 请 求 , 建 立 连接 ,响应 用 户 的 请 求 .查找 所 需 的 静态 的 Web 页 面 ,再 返回 到 客户 端 。 


2. Web 技术 发 展 的 第 二 阶段 一 一 动态 技术 阶段 


在 Web 出 现 的 同时 ,能 存储 、 展 现 二 维 动画 的 GIF 图 像 格 式 也 发 展 成 熟 ,为 HTML 引 
人 动态 元 素 提 供 了 条 件 。 此 后 ,为 了 能 更 好 地 弥补 静态 页 面 的 不 足 , 人 们 将 传统 单机 环境 下 
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的 编程 技术 引入 互联 网 络 与 Web 技术 相 结 合 ,从 而 形成 新 的 网 络 编程 技术 。1995 年 Java 
语言 的 问世 给 Web 的 发 展 带 来 更 大 的 变革 , 它 为 人 们 提供 了 一 条 在 浏览 器 中 开发 应 用 的 捷 
径 。1996 年 ,著名 的 Netscape 浏览 器 2. 0 版 本 和 Microsoft 的 IE 3.0 增加 了 对 
JavaApplets 和 JavaScript 的 支持 。JavaScript 语言 是 一 种 以 脚本 方式 运行 的 .简化 的 Java 
语言 , Web 世界 里 从 此 出 现 了 脚本 技术 。 

其 实 , 真 正 让 HTML 页 面 又 酷 又 炫 、 动 感 无 限 的 是 CSS(Cascading Style Sheets) 和 
DHTML(Dynamic HTML) 技 术 。1996 年 底 , W3C 组 织 提出 了 CSS 的 建议 标准 ,同年 ,IE 
3.0 引 入 了 对 CSS 的 支持 ,这 项 技术 使 得 开发 者 能 够 在 Web 上 更 好 地 把 握 信息 的 展示 。 
1997 年 的 Netscape 4. 0 在 支持 CSS 技术 的 同时 又 增加 了 许多 由 他 们 自 定义 的 动态 HTML 
标记 ,同年 ,Microsoft 公司 发 布 了 IE 4.0, 并 将 动态 的 HTML 标记 、CSS 和 动态 对 象 模 型 
(DHTML Object Model) 发 展 成 了 一 套 完整 的 客户 端 开发 技术 体系 (DHTML)。 该 项 技术 
无 须 启 动 Java 虚拟 机 或 其 他 脚本 环境 ,在 浏览 器 的 支持 下 ,同样 可 以 实现 HTML 页 面 的 动 
态 展示 ,而 且 可 以 获得 更 好 的 效果 。 

1996 年 ,Netscape 2.0 成 功 引入 了 对 QuickTime 插件 的 支持 ,从 此 实现 了 在 HTML 页 
面 下 音频 视频 等 更 加 复杂 的 多 媒体 应 用 。 同 年 ,IE 3. 0 正式 支持 在 HTML 页 面 中 插入 
ActiveX 控件 的 功能 。 从 此 ,各 种 各 样 由 不 同 公司 所 开发 的 插件 先后 在 浏览 器 上 取得 了 
成 功 。 

这 里 所 说 的 动态 页 面 和 静态 页 面 是 相对 应 的 ,在 引入 了 动态 技术 生成 的 网 页 中 ,网 页 
URL 的 后 级 不 只 是 . htm、. html、shtml、xml 等 静态 网 页 的 常见 形式 ,还 可 以 是 . asp、 
.jsp、. Php、. perl、. cgi 等 。 从 网 页 内 容 的 显示 上 看 ,动态 网 页 引入 了 各 项 技术 ,使 得 网 页 内 
容 更 多 样 化 ,引人入胜 ; 从 网 站 的 开发 管理 和 维护 角度 看 ,动态 网 页 以 数据 库 技术 为 基础 ， 
更 利于 网 站 的 维护 ,而 动态 网 页 使 用 了 ASP 对 象 ,可 以 实现 诸如 用 户 注册 、 用 户 登 录 、 数 据 
管理 等 功能 ,提高 了 网 络 的 利用 率 ,为 用 户 提供 了 更 多 的 方便 。 


3. Web 技术 发 展 的 第 三 阶段 一 一 Web 2.0 新 时 期 


在 最 近 两 年 里 , Web 2. 0 这 个 名 词 引 起 了 很 多 人 的 关注 ,什么 是 Web 2.0 呢 ? 其 实 ， 
Web 2.0 并 没有 一 个 准确 的 定义 ,甚至 它 并 不 是 一 个 具体 的 事物 ,而 只 是 人 们 对 于 一 个 阶段 
的 描述 。 在 这 一 阶段 ,用 户 可 以 自己 主导 信息 的 生产 和 传播 ,从 而 打破 了 原先 所 固有 的 单 向 
传输 模式 。Web 2. 0 并 不 是 一 个 革命 性 的 改变 ,而 只 是 应 用 层面 的 东西 ,相对 于 传统 的 门户 
网 站 , 它 具 备 了 更 好 的 交互 性 。Web 2. 0 是 以 Flickr、43Things. com 等 网 站 为 代表 ,以 
Blog、TAG、SNS、RSS、Wiki 等 社会 软件 的 应 用 为 核心 ,依据 六 度 分 隔 、XML、Ajax 等 新 理 
论 和 技术 实现 的 互联 网 新 一 代 模 式 。 

从 Web 1.0 到 Web 2.0 的 转变 ,具体 来 说 ,从 模式 上 是 从 读 向 写 信息 共同 创造 的 一 个 
改变 ; 从 基本 结构 上 则 是 由 网 页 向 发 表 / 展 示 工 具 演 变 ; 从 工具 上 是 由 互联 网 浏览 器 向 各 
类 浏览 器 、RSS 阅读 器 等 内 容 发 展 ; 从 运行 机 制 上 则 是 由 Client Server 向 Web Services 的 
转变 ,因此 ,互联 网 内 容 的 缔造 者 也 由 专业 人 士 向 普通 用 户 拓 展 。 一 句 话 , Web 2.0 的 精髓 
就 是 以 人 为 本 ,提升 用 户 使 用 互联 网 的 体验 。 

如 果 说 Web 1. 0 是 以 数据 为 核心 的 网 .那么 Web 2. 0 就 是 以 报酬 为 出 发 点 的 互联 网 。 
看 一 看 下 面 列 出 的 最 近 的 一 些 Web 2.0 产品 ,读者 就 可 以 理解 以 上 观点 。 
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Blog: 用 户 织 网 ,发 表 新 知识 以 及 其 他 用 户 内 容 链接 ,进而 非常 自然 地 组 织 这 些 
内 容 。 
RSS: 用 户 孕育 发 生 内 容 自 动 分 发 .订阅 。 
Podcsting: 个 人 视频 / 声 频 的 发 布 /订阅 。 
SNS: Blog 十 人 以 及 人 与 人 之 间 的 链接 。 

。 Wiki: 用 户 共 同 建设 一 个 大 百科 全 书 。 

可 以 看 到 ,用 户 在 互联 网 上 的 作用 越 来 越 大 ,他 们 贡献 内 容 、 传 播 内 容 ,而 且 提 供 了 这 些 
内 容 之 间 的 链接 以 及 浏览 路 径 。 在 SNS 里 面 ,内 容 是 以 用 户 为 核心 来 组 织 的 。Web 2.0 是 
以 用 户 为 核心 的 互联 网 。 


1.1.4 Web 的 工作 原理 


当 用 户 想 进入 万 维 网 上 的 一 个 网 页 或 者 其 他 网 络 资源 的 时 候 , 通 常 首先 要 在 用 户 的 浏 
览 器 上 输入 想 访问 网 页 的 统一 资源 定位 符 (CUniform Resource Locator) 或 者 通过 超 链接 方 
式 链接 到 那个 网 页 或 网 络 资源 ,之 后 是 URL 的 服务 器 名 部 分 被 命名 为 域名 系统 的 分 布 于 
全 球 的 因特网 数据 库 解析 ,并 根据 解析 结果 决定 进入 哪 一 个 耻 ( 网 络 协议 ) 地址 (IP 
Address) 。 

接 下 来 是 为 所 要 访问 的 网 页 向 在 那个 IP 地 址 工作 的 服务 器 发 送 一 个 HTTP 请 求 。 在 
通常 情况 下 , HTML 文本 、 图 片 和 构成 该 网 页 的 一 切 其 他 文件 很 快 会 被 逐一 请 求 并 发 送 回 
用 户 。 

网 络 浏览 器 接 下 来 的 工作 是 把 HTML、CSS 和 其 他 接受 到 的 文件 所 描述 的 内 容 加 上 图 
像 、 链 接 和 其 他 必须 的 资源 显示 给 用 户 , 这 些 构成 了 用 户 所 看 到 的 “网 页 ”。 具 体 访问 过 程 如 
图 1-1 所 示 。 
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1-1 Web 工作 原 理 


大 多 数 的 网 页 自身 包含 有 超 链接 指向 其 他 相关 网 页 ,可 能 还 有 下 载 . 源 文献 .定义 和 其 
他 网 络 资源 , 像 这 样 通过 超 链接 把 有 用 的 相关 资源 组 织 在 一 起 就 形成 了 一 个 所 谓 的 信息 的 
“网 ”, 这 个 网 在 因特网 上 被 方便 地 使 用 就 构成 了 最 早 在 20 世纪 90 年 代 初 由 带 姆 . 伯 纳 斯 - 
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李 所 说 的 万 维 网 。 
(2 Web 前 端的 由 来 


随 着 Web 技术 的 不 断 发 展 ,对 于 Web 技术 的 要 求 越 来 越 高 , Web 开发 不 仅仅 是 网 页 制 
作 这 个 层面 , 它 的 分 工 更 细 、 包 含量 更 大 。 


1.2.1 Web 前 端的 概念 


Web 前 端 开发 主要 是 指 面向 用 户 的 界面 或 表现 层 开 发 ,一 般 来 说 , Web 前 端 开发 在 绝 
大 部 分 情况 下 都 是 指 JavaScript、Flash、Silverlight、CSS、HTML、Flex 等 的 开发 设计 活动 ， 
有 时 候 也 包含 用 PHP、ASP. NET 等 进行 的 动态 网 页 开发 。 


1.2.2 ”Web 前 端的 开发 历史 和 开发 现状 
1. Web 前 端的 开发 历史 


在 Web 发 展 初期 ,HTML 技术 只 能 展示 简单 的 页 面 ,维护 和 更 新 也 相当 麻烦 ,CSS 2.0 
所 描述 的 信息 结构 能 帮助 设计 师 分 离 出 表现 和 内 容 , 使 站 点 的 构建 和 维护 更 加 容易 ,因此 以 
CSS 十 DIV 为 主要 技术 的 页 面 重 构 技术 开始 毁 露 头角 ,同时 促进 了 前 端 开发 领域 的 发 展 。 

前 端 开发 早 在 Web 标准 出 现 的 时 候 就 初 见 端倪 ,但 真正 有 和 较 大 的 发 展 则 是 在 
JavaScript 逐渐 成 为 Web 前 端 开发 的 成 熟 语言 之 后 。 随 着 Web 2.0 的 深入 人 心 和 视频 网 
站 、SNS、 网 页 游戏 ,博客 、 微 博 等 相应 产品 陆续 出 现 , 人 们 对 网 页 的 各 种 需求 不 断 增加 ,要 求 
也 越 来 越 苛刻 ,因此 JavaScript 被 委 以 重任 ,以 JavaScript 为 标志 的 Web 前 端 开发 逐渐 进入 
加 速 发 展 的 轨道 。 


2. Web 前 端的 开发 现状 


到 目前 为 止 , Web 前 端 开发 正 处 于 发 展 的 高 峰 期 。 由 于 各 互联 网 公司 都 注意 到 站 点 的 
可 用 性 问题 ,为 了 加 强 其 产品 的 用 户 体验 ,吸引 用 户 , 各 种 以 * 用 户 体验 ?为 目标 的 团队 如 雨 
后 春笋 般 出 现 ,大 家 只 要 稍微 留意 一 下 ,就 会 发 现 几 乎 每 个 大 的 互联 网 公司 都 有 属于 自己 的 
互联 网 团队 ,例如 淘宝 网 的 “淘宝 UED”、 百 度 旗下 的 “百度 UFO”、 腾 讯 的 ISD 和 CDC 等 ， 
这 些 团 队 的 性 质 大 多 相似 ,以 提高 用 户 体验 为 第 一 目标 ,例如 “百度 UFO” 对 本 身 团队 的 


定位 
(1.3 ”Web 前 端 开发 技术 
Web 前 端 开发 技术 包括 HTML、CSS、JavaScript、Ajax、jQuery 等 开发 语言 及 技术 。 


1. HTML 


HTML(Hypertext Markup Language) 超 级 文本 标记 语言 是 标准 通用 标记 语言 下 的 一 
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个 应 用 ,也 是 一 种 规范 一 种 标准 。 

HTML 通过 标记 符号 来 标记 要 显示 的 网 页 中 的 各 个 部 分 。 网 页 文件 本 身 是 一 种 文本 
文件 ,通过 在 文本 文件 中 添加 标记 符 可 以 告诉 浏览 器 如 何 显示 其 中 的 内 容 ( 例 如 文字 如 何 处 
理 、 画 面 如 何 安排 ,图 片 如 何 显示 等 )。 浏 览 器 按 顺 序 阅读 网 页 文件 ,然后 根据 标记 符 解 释 和 
显示 其 标记 的 内 容 , 对 书写 出 错 的 标记 不 指出 其 错误 , 且 不 停止 其 解释 执行 过 程 ,编制 者 只 
能 通过 显示 效果 来 分 析出 错 原因 和 出 错 部 位 。 需 要 注意 的 是 ,对 于 不 同 的 浏览 器 ,对 同一 标 
记 符 可 能 会 有 不 完全 相同 的 解释 ,因而 可 能 会 有 不 同 的 显示 效果 。 


2. CSS 


CSS(Cascading Style Sheets) 层 释 样 式 表 是 一 种 用 来 表现 HTML( 标 准 通用 标记 语言 
的 一 个 应 用 ) 或 XML (标准 通用 标记 语言 的 一 个 子 集 ) 等 文件 样式 的 计算 机 语言 。 

CSS 目前 的 最 新 版 本 为 CSS 3, 它 是 能 够 真正 做 到 网 页 表现 与 内 容 分 离 的 一 种 样式 设 
计 语 言 。 相 对 于 传统 HTML 的 表现 而 言 ,CSS 能 够 对 网 页 中 对 象 的 位 置 排版 进行 像素 级 
的 精确 控制 ,支持 几乎 所 有 的 字体 、 字 号 样式 ,拥有 对 网 页 对 象 和 模型 样式 编辑 的 能 力 ,并 能 
够 进行 初步 交互 设计 ,是 目前 基于 文本 展示 最 优秀 的 表现 设计 语言 。CSS 能 够 根据 不 同 使 
用 者 的 理解 能 力 简化 或 者 优化 写法 ,针对 各 类 人 和 群 ,有 较 强 的 易 读 性 。 


3. JavaScript 


JavaScript 是 一 种 直译 式 脚本 语言 ,是 一 种 动态 类 型 、 弱 类 型 .基于 原型 的 语言 ,内 置 支 
持 类 型 。 它 的 解释 器 被 称 为 JavaScript 引擎 ,为 浏览 器 的 一 部 分 ,广泛 用 于 客户 端的 脚本 语 
言 , 最 早 是 在 HTML 网 页 上 使 用 ,用 来 给 HTML 网 页 增加 动态 功能 。 

在 1995 年 , 它 由 Netscape 公司 的 Brendan Eich 在 网 景 导航 者 浏览 器 上 首次 设计 而 成 。 
因为 Netscape 公司 与 Sun 公司 合作 ,Netscape 管理 层 希 望 它 的 外 观看 起 来 像 Java, 因 此 取 
名 为 JavaScript, 但 实际 上 它 的 语法 风格 与 Self 和 Scheme 较为 接近 。 


4. Ajax 


Ajax(Asynchronous JavaScript And XML, 异 步 JavaScript 和 XML) 是 一 种 创建 交互 
式 网 页 应 用 的 网 页 开发 技术 。 

Ajax 二 异步 JavaScript 和 XML。 

Ajax 是 一 种 用 于 创建 快速 动态 网 页 的 技术 。 通 过 在 后 台 与 服务 器 进行 少量 的 数据 交 
换 ,Ajax 可 以 使 网 页 实现 异步 更 新 ,这 意味 着 可 以 在 不 重新 加 载 整 个 网 页 的 情况 下 对 网 页 
的 某 部 分 进行 更 新 ,而 传统 的 网 页 (不 使 用 Ajax) 如 果 需 要 更 新 内 容 , 必 须 重 载 整个 网 页 
页 面 。 


5. jQuery 


jQuery 是 继 Prototype 之 后 又 一 个 优秀 的 JavaScript 库 , 它 是 轻 量 级 的 JS 库 , 它 兼容 
CSS 3, 还 兼容 各 种 浏览 器 ,jQuery 2.0 及 后 续 版 本 不 再 支持 IE 6/7/8 浏览 器 。jQuery 使 用 
户 能 更 方便 地 处 理 HTML events 及 实现 动画 效果 ,并 且 方 便 地 为 网 站 提供 Ajax 交互 。 
jQuery 还 有 一 个 比较 大 的 优势 , 它 的 文档 说 明 很 全 ,而 且 各 种 应 用 也 说 得 很 详细 ,同时 还 有 
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许多 成 熟 的 插件 可 供 选 择 。jQuery 能 够 使 用 户 的 HTML 页 面 保持 代码 和 HTML 内 容 分 
离 ,也 就 是 说 ,不 用 在 HTML 里 面 插入 一 堆 JS 来 调用 命令 ,只 需要 定义 ID 即 可 。 

jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 库 ,核心 理念 是 "write less,do more( 写 得 更 
少 ,做 得 更 多 )”。jQuery 在 2006 年 1 月 由 美国 人 John Resig 在 纽约 的 BarCamp 发 布 ,吸引 
了 来 自 世 界 各 地 的 众多 JavaScript 高 手 加 入 ,由 Dave Methvin 率领 团队 进行 开发 。 如 今 ， 
jQuery 已 经 成 为 最 流行 的 JavaScript 库 ,在 世界 前 10 000 个 访问 最 多 的 网 站 中 有 超过 55% 
在 使 用 jQuery。 

jQuery 是 免费 .开源 的 ,使 用 MIT 许可 协议 。 jQuery 的 语法 设计 可 以 使 开发 者 更 加 便 
捷 , 例 如 操作 文档 对 象 . 选 择 DOM 元 素 、 制 作 动画 效果 、 事 件 处 理 、 使 用 Ajax 以 及 其 他 功 
能 。 除 此 以 外 ,jQuery 还 提供 了 API 让 开发 者 编写 插件 ,其 模块 化 的 使 用 方式 使 开发 者 可 
以 很 轻松 地 开发 出 功能 强大 的 静态 或 动态 网 页 。 

jQuery ,顾名思义 就 是 JavaScript 和 查询 (Query) , 即 辅 助 JavaScript 开发 的 库 。 


(1.4 Web 前 端 开发 工具 


目前 ,常用 的 Web 前 端 开发 工具 有 很 多 ,包含 用 于 网 页 美工 的 、 动 画 设 计 的 、 代 码 编辑 
的 ,下 面 简单 地 介绍 几 种 。 


1. Photoshop 


Adobe Photoshop 简称 PS, 它 是 由 Adobe Systems 开发 和 发 行 的 图 像 处 理 软件 。 
Photoshop 主要 处 理 以 像素 构成 的 数字 图 像 , 使 用 其 众多 的 编 修 与 绘图 工具 可 以 有 效 
地 进行 图 片 编辑 工作 。PS 有 很 多 功能 ,在 图 像 .图形 文字、 视频 .出 版 等 方面 都 有 涉及 。 


2. Flash 


Adobe Flash ( 原 称 Macromedia Flash, 简称 Flash; 前 身 FutureSplash) 是 美国 
Macromedia 公司 (现在 已 被 Adobe 公司 收购 ) 所 设计 的 一 种 二 维 动画 软件 ,通常 包括 
Adobe Flash( 用 于 设计 和 编辑 Flash 文档 ) 以 及 Adobe Flash Player( 用 于 播放 Flash 
文档 ) 。 


3. Dreamweaver 


Adobe Dreamweaver 简称 DW ,中 文 名 称 为 “梦想 编织 者 ”, 它 是 美国 Macromedia 公司 
开发 的 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 网 页 编辑 器 。DW 是 第 一 套 针对 专业 网 
页 设计 师 特别 发 展 的 视觉 化 网 页 开发 工具 ,利用 它 可 以 轻而易举 地 制作 出 跨越 平台 限制 和 
跨越 浏览 器 限制 的 充满 动感 的 网 页 。 

Adobe Dreamweaver 使 用 所 见 即 所 得 的 接口 ,也 有 HTML 编辑 功能 , 它 有 Mac 和 
Windows 系统 的 版 本 。 随 着 Macromedia 被 Adobe 收购 ,Adobe 开始 计划 开发 Linux 版 本 
的 Dreamweaver。Dreamweaver 自 MX 版 本 开始 使 用 了 Opera 的 排版 引擎 Presto 作为 网 
页 预览 。 
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4. FrontPage 


FrontPage 是 Microsoft 公司 出 品 的 一 款 网 页 制作 入 门 级 软件 。FrontPage 使 用 方便 、 
简单 ,用户 会 用 Word 就 能 制作 网 页 ,因此 相对 Dreamweaver 而 言 FrontPage 更 容易 上 手 。 
所 见 即 所 得 是 其 特点 ,该 软件 结合 了 设计 、 程 序 码 、 预 览 3 种 模式 。Microsoft 公司 在 2006 
年 年 底 前 停止 提供 FrontPage 软件 。 


5. Notepad 


Notepad 指 代码 编辑 器 或 Windows 中 的 “记事 本 ”程序 。 它 在 Windows 下 主要 用 于 文 
本 编辑 ,是 一 款 开源 、 小 巧 、 免 费 的 纯 文本 编辑 器 。 在 文字 编辑 方面 , 它 与 Windows 写字 板 
的 功能 相当 。 当 然 ,更 重要 的 是 Notepad 十 十 是 程序 员 们 编写 代码 的 利器 。 


6. EditPlus 


EditPlus 是 一 款 由 韩国 Sangil Kim(ES-Computing) 出 品 的 小 巧 且 功 能 强大 的 可 处 理 
文本 .HTML 和 程序 语言 的 Windows 编辑 器 ,甚至 可 以 通过 设置 用 户 工 具 将 其 作为 C、 
Java、PHP 等 语言 的 一 个 简单 的 IDE。 

EditPlus( 文 字 编辑 器 ) 汉 化 版 是 一 套 功 能 强大 、 可 取代 记事 本 的 文字 编辑 器 ,拥有 无 限 
制 的 撤销 与 重 做 、 英 文 拼 字 检查 、 自 动 换行 、 列 数 标记 、 搜 寻 取 代 、 同 时 编辑 多 个 文件 ,全 屏幕 
浏览 功能 ; 而 且 它 还 有 一 个 好 用 的 功能 ,就 是 它 有 监视 剪贴 板 的 功能 ,同步 于 剪贴 板 , 可 自 
动 粘贴 进 EditPlus 的 窗口 中 ,省 去 粘贴 的 步骤 ; 它 也 是 一 个 非常 好 用 的 HTML 编辑 器 , 除 
了 支持 颜色 标记 、HTML 标记 ,还 支持 CC++、Perl Java, 另 外 , 它 还 内 建 了 完整 的 HTML 
& CSS 1 指令 功能 ,对 于 习惯 用 记事 本 编辑 网 页 的 朋友 , 它 可 帮助 用 户 节省 一 半 以 上 的 网 
页 制作 时 间 , 若 安装 IE 3.0 以 上 的 版 本 , 它 还 会 结合 IE 浏览 器 于 EditPlus 窗口 中 ,让 用 户 
可 以 直接 预览 编辑 好 的 网 页 ( 若 没 安 装 下 ,也 可 指定 浏览 器 路 径 )。 因 此 , 它 是 一 个 相当 棱 
又 多 用 途 .多 状态 的 编辑 软件 。 


(3 Web 前 端 工 程 师 的 职业 要 求 


一 位 好 的 Web 前 端 开发 工程 师 在 知识 体系 上 既 要 有 广度 ,又 要 有 深度 ,所 以 很 多 大 公 
司 即 使 出 高 薪 也 很 难 招聘 到 理想 的 前 端 开发 工程 师 。 以 前 会 Photoshop 和 Dreamweaver 
就 可 以 制作 网 页 ,现在 只 掌握 这 些 已 经 远 远 不 够 了 。 无 论 是 在 开发 难度 上 ,还 是 在 开发 方式 
上 ,现在 的 网 页 制作 都 更 接近 传统 的 网 站 后 台 开 发 ,所 以 现在 不 再 叫 网 页 制作 ,而 是 叫 Web 
前 端 开 发 。Web 前 端 开 发 在 产品 开发 环节 中 的 作用 变 得 越 来 越 重要 ,而且 需要 专业 的 前 端 
工程 师 才 能 做 好 ,这 方面 的 专业 人 才 近 两 年 来 备 受 青睐 。Web 前 端 开 发 是 一 项 很 特殊 的 工 
作 ,涵盖 的 知识 面 非常 广 , 既 有 具体 的 技术 .又 有 抽象 的 理念 。 简 单 地 说 , 它 的 主要 职能 就 是 
把 网 站 的 界面 更 好 地 呈现 给 用 户 。 

如 何 才能 做 得 更 好 呢 ? 

第 一 ,必须 掌握 基本 的 Web 前 端 开发 技术 ,其 中 包括 CSS、HTML、DOM、BOM .Ajax、 
JavaScript 等 ,在 掌握 这 些 技术 的 同时 ,还 要 清楚 地 了 解 它们 在 不 同 浏览 器 上 的 兼容 情况 、 
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> 
泻 染 原理 和 存在 的 Bug。 
第 二 ,在 一 名 合格 的 前 端 工 程 师 的 知识 结构 中 ,网 站 性 能 优化 .SEO 和 服务 器 端的 基础 
知识 也 是 必须 掌握 的 。 


第 三 ,必须 学 会 运用 各 种 工具 进行 辅助 开发 。 

第 四 ,除了 要 掌握 技术 层面 的 知识 外 ,还 要 掌握 理论 层面 的 知识 ,包括 代码 的 可 维护 性 、 
组 件 的 易 用 性 、 分 层 语义 模板 和 浏览 器 分 级 支持 等 。 

可 见 , 看 似 简 单 的 网 页 制作 如 果 要 做 得 更 好 、 更 专业 , 真 的 是 不 简单 ,这 就 是 前 端 开发 的 
特点 ,也 是 让 很 多 人 困惑 的 原因 。 如 此 繁杂 的 知识 体系 让 新 手 学 习 起 来 无 从 下 手 , 对 于 老手 
来 说 ,也 时 常 不 知道 下 一 步 该 学 什么 。 

代码 质量 是 前 端 开发 中 应 该 重点 考虑 的 问题 之 一 。 例 如 ,实现 一 个 网 站 界面 可 能 会 有 
无 数 种 方案 ,但 有 些 方案 的 维护 成 本 会 比较 高 ,有 些 方案 会 存在 性 能 问题 ,而 有 些 方案 更 易 
于 维护 ,并 且 性 能 也 比较 好 ,这 里 的 关键 影响 因素 就 是 代码 质量 。CSS、HTML、JavaScript 
这 3 种 前 端 开发 语言 的 特点 是 不 同 的 ,对 代码 质量 的 要 求 也 不 同 , 但 它们 之 间 又 有 着 千 丝 万 
缕 的 联系 。 


Ye 二 
Photoshop CS6 概 述 | 
本 章 学 习 目标 : 


名 了 解 Photoshop 的 发 展 及 应 用 。 
局 掌握 位 图 与 拓 量 图 的 特点 及 区 别 。 
避 掌 握 Photoshop 的 窗口 组 成 。 

局 掌握 Photoshop 文件 的 基本 操作 。 


@.1 Photoshop 简介 


Adobe Photoshop CS6 是 目前 应 用 最 广泛 的 平面 设计 软件 之 一 , 它 从 Photoshop 1.0 
到 目前 的 Photoshop CS6 共 经 历 了 13 个 版 本 ,功能 不 断 增 强 ,应 用 越 来 越 广 ,在 图 像 图形、 
文字 视频 .出 版 等 方面 都 有 涉及 。 


2.1.1 Photoshop 的 起 源 


Photoshop 的 主要 设计 师 Thomas Knoll 的 父亲 Glenn Knoll 是 密 敬 根 大 学 教授 ,同时 
也 是 一 个 摄影 爱好 者 ,他 家 的 地 下 室 是 一 个 暗房 ,他 的 两 个 儿子 Thomas 和 John 从 小 就 跟 
着 爸爸 玩 暗 房 ,但 John 似乎 对 当时 刚刚 开始 发 行 的 个 人 电脑 更 感 兴趣 ,此 后 Thomas 也 迷 
上 个 人 电脑 ,并 在 1987 年 买 了 一 台 蔷 果 电 脑 (MacPlus ) 用 来 帮助 完成 他 的 博士 论文 。 
Thomas 发 现 : 当时 的 苹果 电脑 无 法 显示 带 灰 度 的 黑白 图 像 ,因此 他 自己 写 了 一 个 程序 
Display; 而 John 这 时 在 星球 大 战 导演 Lucas 的 电影 特殊 效果 制作 公司 Industry Light 
Magic 工作 ,对 Thomas 的 程序 很 感 兴趣 。 兄 弟 倘 在 此 后 的 一 年 多 把 Display 不 断 修改 为 功 
能 更 为 强大 的 图 像 编辑 程序 ,经 过 多 次 改名 后 ,在 一 个 展会 上 他 们 接受 一 个 参展 观众 的 建 
议 ,把 程序 改名 为 Photoshop。 此 时 的 Display/Photoshop 已 经 有 Level、 色 彩 平衡 ,饱和 度 
等 调整 。 此 外 ,John 还 写 了 一 些 程序 ,后 来 成 为 插件 (Plug-in) 的 基础 。 他 们 的 第 一 个 商业 
成 功 是 把 Photoshop 交 给 一 个 扫描 仪 公 司 搭配 卖 , 名 字 叫 Barneyscan XP ,版 本 是 0. 87。 与 
此 同时 ,John 继续 找 其 他 买 家 ,包括 SuperMac 和 Aldus 都 没有 成 功 。 最 终 他 们 找到 了 
Adobe 公司 的 Russell Brown(Adobe 公司 的 艺术 和 总监 ) ,Russell Brown 此 时 已 经 在 研究 是 
和 否 考 虑 另外 一 家 公司 Letraset 的 ColorStudio 图 像 编辑 程序 ,看 过 Photoshop 以 后 他 认为 
Knoll 兄弟 的 程序 更 有 前 途 ,在 1988 年 7 月 他 们 口头 决定 合作 ,真正 的 法 律 合同 到 次 年 4 月 
才 完成 。Adobe 公司 决定 保留 Photoshop 这 个 名 字 。 
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1990 年 2 月 ,Photoshop 1.0 版 本 发 行 , 它 给 计算 机 图 像 处 理 行业 市 场 带 来 巨大 的 冲 
击 。 除 了 拥有 其 他 软件 没有 的 特点 外 , 它 还 获得 了 天 时 ,当时 正 值 计 算 机 桌面 革命 炒 得 火 
热 , 桌 面 的 发 展 更 为 它 创造 了 有 利 条 件 。 之 后 ,Photoshop 随 着 功能 不 断 强大 ,版 本 也 在 升 
级 ,到 2003 年 , Adobe 的 Creative Suite 套装 将 Adobe Photoshop 8 更 名 为 Adobe 
Photoshop CS。Adobe Photoshop 有 两 个 发 行 版 本 , 即 标准 版 Adobe Photoshop 和 扩展 版 
Adobe Photoshop Extended, 扩 展 版 除 包 含 标准 版 的 所 有 功能 之 外 ,还 增加 了 3D 处 理 功 能 、 
动画 图 形 编辑 功能 和 高 级 图 像 分 析 功 能 。 

2012 年 ,Adobe Photoshop CS6 正式 发 布 ,在 这 个 版 本 中 整合 了 其 Adobe 专 有 的 
Mercury 图 像 引擎 ,并 通过 显卡 核心 GPU 提供 了 强悍 的 图 片 编辑 能 力 。Content-Aware 
Patch 能 帮助 用 户 更 加 轻松 、 方 便 地 选取 区 域 ,方便 用 户 抠 图 等 操作 。 


2.1.2 Photoshop 的 应 用 


Photoshop 的 应 用 领域 大 致 包括 数码 照片 处 理 、 广 告 摄影 视觉 创意 ,平面 设计 、 艺 术 文 
字 ,建筑 效 果 图 后 期 修饰 及 网 页 制作 等 ,下 面 分 别 进行 介绍 。 

(1) 数码 照片 处 理 : 在 Photoshop 中 可 以 进行 各 种 数码 照片 的 合成 .修复 和 上 色 操 作 ， 
例如 为 数码 照片 更 换 背 景 .为 人 物 更 换 发 型 .去 除 斑点 、 数 码 照片 的 偏 色 校正 等 。 
Photoshop 同时 也 是 婚纱 影楼 设计 师 们 的 得 力 助 手 。 

(2) 广告 摄影 : 广告 摄影 作为 一 种 对 视觉 要 求 非常 严格 的 工作 ,要 用 最 简洁 的 图 像 和 
文字 给 人 以 最 强烈 的 视觉 冲击 ,其 最 终 作 品 往往 要 经 过 Photoshop 的 艺术 处 理 才 能 得 到 满 

(3) 视觉 创意 : 视觉 创意 是 Photoshop 的 特长 ,通过 Photoshop 的 艺术 处 理 可 以 将 原本 
不 相干 的 图 像 组 合 在 一 起 ,用 户 也 可 以 发 挥 想 象 自行 设计 富有 新 意 的 作品 ,利用 色彩 效果 等 
在 视觉 上 表现 全 新 的 创意 。 

(4) 平面 设计 : 平面 设计 是 Photoshop 应 用 最 为 广泛 的 领域 ,无 论 是 图 书 封面 ,还 是 招 
贴 海报 ,这 些 具 有 丰富 图 像 的 平面 印刷 品 基本 上 都 需要 使 用 Photoshop 软件 对 图 像 进行 
处 理 。 

(5) 艺术 文字 : 普通 的 艺术 文字 经 过 Photoshop 的 艺术 处 理会 变 得 精美 绝伦 ,利用 
Photoshop 可 以 使 文字 发 生 各 种 各 样 的 变化 ,并 且 利 用 这 些 艺 术 化 处 理 后 的 文字 也 可 以 为 
图 像 增加 效果 。 

(6) 建筑 效果 图 后 期 修饰 : 当 在 制作 的 建筑 效果 图 中 包括 许多 三 维 场景 时 ,人 物 与 配 
景 包括 场景 的 颜色 常常 需要 在 Photoshop 中 增加 并 进行 调整 。 

(7) 网 页 制作 : 网 络 的 迅速 普及 是 促使 更 多 的 人 学 习 和 掌握 Photoshop 的 一 个 重要 原 
因 ,因为 在 制作 网 页 时 Photoshop 是 必 不 可 少 的 网 页 图 像 处 理 软件 ,而 且 发 挥 的 作用 越 来 
越 大 。 


2.1.3 图 像 的 基本 概念 
1. 像素 和 分 辩 率 
在 Photoshop 中 ,像素 (pixeD) 是 组 成 图 像 的 最 基本 单元 , 它 是 一 个 小 矩形 颜色 块 。 一 
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个 图 像 通常 由 很 多 像素 组 成 ,这 些 像素 被 排 成 横行 或 纵 列 , 当 用 缩放 工具 把 图 像 放 大 到 一 定 
比例 时 ,就 可 以 看 到 类 似 马 赛 克 的 效果 。 每 个 像素 都 有 不 同 的 颜色 值 , 单 位 长 度 的 像素 越 
多 ,分 辩 率 (ppi) 越 高 ,图 像 的 品质 就 越 好 。 图 2-1 所 示 为 显示 器 上 以 正常 比例 显示 的 图 像 ， 
当 把 图 像 放 大 到 一 定 的 比例 后 ,就 会 看 到 图 2-2 所 示 的 类 似 马赛 克 的 效果 。 


图 2-1 显示 器 上 正常 显示 的 图 像 图 2-2 图 像 放大 后 的 马赛 克 效 果 


图 像 分 辨 率 是 指 图 像 在 一 个 单位 打印 长 度 内 像素 的 个 数 ,分 辩 率 的 单位 是 ppi(pixels 
per inch) 。 例 如 ,图 像 分 辩 率 是 72ppi, 即 在 每 英寸 长 度 内 包含 72 个 像素 ,也 就 是 在 每 一 平 
方 英寸 的 图 像 中 有 5184 个 像素 (72X72)。 图 像 分 辩 率 越 高 ,输出 效果 越 清晰 。 

分 辩 率 的 高 低 和 图 像 大 小 之 间 有 着 密切 的 关系 ,分 辩 率 越 高 ,所 包含 的 像素 越 多 ,图 像 
的 信息 量 越 大 ,因此 文件 也 就 越 大 。 此 外 ,图 像 的 清晰 度 也 与 像素 的 总 数 有 关 , 如 果 像 素 固 
定 , 那 么 提高 分 辩 率 虽然 可 以 使 图 像 变 得 比较 清晰 ,但 尺寸 却 会 变 小 ; 反之 ,降低 分 辩 率 图 
像 会 变 大 ,但 画面 质量 会 变 得 比较 粗糙 。 像 素数 目 和 分 辩 率 共同 决定 了 打印 时 图 像 的 大 小 ， 
像素 相同 但 分 辩 率 不 同 的 图 像 ,打印 时 的 大 小 也 不 相同 。 

另外 ,大 家 经 常 提 到 的 输出 分 辩 率 是 以 dpi(dots per inch, 每 英寸 所 含 的 点 ) 为 单位 的 ， 
它 是 针对 输出 设备 而 言 的 ,通常 激光 打印 机 的 输出 分 辩 率 为 300 一 600dpi, 照 排 机 要 达到 
1200 一 2400dpi 或 更 高 。 


2. 点 阵 图 和 矢量 图 


点 阵 图 是 由 Adobe Photoshop、Paint 等 软件 产生 的 ,如 果 将 此 类 图 放大 到 一 定 程度 ,就 
会 发 现 它 是 由 一 个 个 小 方 格 组 成 的 ,这 些小 方 格 被 称 为 像素 , 且 每 个 像素 都 有 一 个 明确 的 颜 
色 ,故此 类 图 又 被 称 为 像素 图 。 在 整 张 图 中 ,单位 面积 内 所 包含 的 像素 越 多 越 能 表现 出 图 片 
细微 的 部 分 。 其 中 ,分 辩 率 和 点 阵 图 有 着 密 不 可 分 的 关系 ,分 辩 率 越 高 ,单位 面积 内 的 像素 
就 越 多 ,图 像 也 就 越 清晰 ; 反之 ,分 辩 率 太 低 , 或 将 图 片 的 显示 比例 放 得 过 大 ,就 会 造成 图 像 
变 模 糊 且 产生 锯齿 边缘 和 色调 不 连续 的 情况 。 

由 于 点 阵 图 是 由 一 连 串 排列 的 像素 组 合 而 成 的 , 它 并 不 是 独立 的 图 形 对 象 ,所 以 不 能 编 
辑 图 像 中 的 个 别 对 象 。 如 果 要 编辑 其 中 部 分 区 域 的 图 像 , 就 必须 首先 精确 地 选取 需要 编辑 
的 像素 范围 ,然后 再 进行 编辑 ,能够 处 理 点 阵 图 的 软件 有 Photoshop、Photo Impact、Painter 
和 CorelDRAW 软件 内 的 CorelPhotoPaint 等 。 

矢量 图 是 由 经 过 精确 定义 的 直线 和 曲线 组 成 的 ,这 些 直 线 和 曲线 称 为 向 量 , 因 此 矢量 图 
又 称 为 向 量 图 。 其 中 每 一 个 对 象 都 是 独立 的 个 体 . 它 们 都 有 各 自 的 色彩 形状. 尺寸 和 位 置 
坐标 等 属性 。 在 矢量 图 编辑 软件 中 可 以 任意 改变 图 中 某 个 对 象 的 属性 ,而 不 会 影响 到 其 他 
的 对 象 ,也 不 会 降低 图 形 的 品质 。 
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矢量 图 与 分 辩 率 无 关 ,也 就 是 说 ,可 以 将 它们 缩放 到 任意 尺寸 ,可 以 按 任 意 分 辩 率 打印 ， 
且 不 会 丢失 细节 或 降低 清晰 度 , 因 此 矢量 图 最 适合 表现 醒目 的 图 形 , 这 种 图 形 无 论 缩放 到 何 
种 程度 均 能 保持 线条 清晰 ,不 会 失真 。 

矢量 图 的 文件 大 小 只 与 图 形 的 复杂 程度 有 关 , 一 般 需 要 的 存储 空间 很 小 ,在 绘制 与 编辑 
时 对 计算 机 的 内 存 要 求 较 低 ; 在 输出 时 ,可 以 用 打印 机 或 印刷 机 等 输出 设备 的 最 高 分 辩 率 
进行 打印 。 矢 量 图 一 般 是 直接 在 计算 机 上 绘制 而 成 的 ,可 以 绘制 ,编辑 矢量 图 的 软件 有 
Tllustrator ,CorelDRAW Freehand 和 Expression 等 。 


3. 颜色 深度 


颜色 深度 (Color Depth) 用 来 度量 图 像 中 有 多 少 种 颜色 信息 可 用 于 显示 或 打印 像素 ,其 
单位 是 位 (bit) ,所 以 颜色 深度 有 时 也 称 为 位 深度 或 像素 深度 。 常 用 的 颜色 深度 是 1 位 .8 
位 ,24 位 和 32 位 ,颜色 深度 为 1 位 的 像素 有 两 个 可 能 的 数值 , 即 0 或 1。 较 大 的 颜色 深度 
(每 像素 信息 的 位 数 更 多 ) 意 味 着 数字 图 像 具 有 较 多 的 可 用 颜色 和 较 精 确 的 颜色 表示 。 

因为 一 个 1 位 的 图 像 包 含 两 种 颜色 ,所 以 1 位 的 图 像 最 多 可 由 两 种 颜色 组 成 ,每 个 像素 
的 颜色 只 能 是 黑色 或 白色 ; 一 个 8 位 的 图 像 包含 2 种 颜色 ,或 256 级 灰 阶 ,每 个 像素 可 能 
是 256 种 颜色 中 的 任意 一 种 ; 一 个 24 位 的 图 像 包 含 1670 万 (2*) 种 颜色 ; 一 个 32 位 的 图 
像 包含 ?于 种 颜色 ,但 很 少 这 样 讲 , 这 是 因为 32 位 的 图 像 可 能 是 一 个 具有 Alpha 通道 的 24 
位 图 像 ,也 可 能 是 CMYK 色彩 模式 的 图 像 , 这 两 种 情况 下 的 图 像 都 包含 有 4 个 8 位 的 通道 。 
图 像 色 彩 模式 和 色彩 深度 是 相关 联 的 (一 个 RGB 图 像 和 一 个 CMYK 图 像 都 可 以 是 32 位 )， 
但 不 总 是 这 种 情况 。Photoshop 也 支持 16 位 /通道 ,可 产生 16 位 灰 度 模式 的 图 像 ,48 位 
RGB 模式 的 图 像 .64 位 CMYK 模式 的 图 像 , 表 2-1 列 出 了 常见 的 色彩 深度 .颜色 数量 和 色 
彩 模 式 的 关系 。 

表 2-1 色彩 深度 .颜色 数量 和 色彩 模式 的 关系 


色彩 深度 颜色 数量 色彩 模式 

1 位 2( 黑 和 白 ) 位 图 

8 位 256 索引 颜色 / 灰 度 
16 位 65 536 灰 度 16 位 /通道 
24 位 1670 万 RGB 

32 位 CMYK RGB 

48 位 RGB 16 位 /通道 


C3 Photoshop CS6 界面 简介 


正确 安装 Photoshop 后 , 单 击 Windows 桌面 任务 栏 上 的 [开始 按钮 ,在 弹出 的 [开始 】 
菜单 中 选择 【所 有 程序 】| Adobe Photoshop CS6, 即 可 启动 Photoshop 软件 。 在 Adobe 
Photoshop CS6 中 ,默认 窗口 界面 是 黑色 的 。 

启动 Photoshop CS6 后 ,可 以 看 出 Photoshop CS6 的 界面 仍然 延续 了 Adobe 公司 产品 
的 一 贯 风格 ,如 图 2-3 所 示 。 按 照 功能 ,Photoshop CS6 的 界面 具体 分 为 标题 栏 .菜单 栏 . 工 
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具 箱 、 工 具 选 项 栏 、 面 板 区 、 图 像 窗口 、 状 态 栏 等 ,下 面 分 别 进行 介绍 。 
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图 2-3 窗口 界面 介绍 


1. 标题 栏 


标题 栏 位 于 界面 最 上 方 , 其 左 侧 显 示 的 是 软件 图 标 及 名 称 , 右 侧 是 用 来 控制 界面 显示 状 
态 的 3 个 按钮 ,从 左 至 右 分 别 为 [最 小 化 3 按钮 【最 大 化 /还 原 ] 按 钮 和 [关闭 ] 按 钮 。 


2. 菜单 栏 


菜单 栏 位 于 标题 栏 下 方 ,包含 了 用 于 图 像 处 理 的 各 类 命令 ,共有 【文件 【编辑 【图 
像 ]【 图 层 】【 文 字 】 【选择 】【 滤 镜 ]【 视 图 ] 【窗口 I 和 [帮助 310 个 菜单 ,每 一 个 菜单 下 又 
有 若干 个 菜单 命令 ,选择 相关 的 菜单 命令 可 以 执行 相应 的 操作 。 

在 下 拉 菜 单 中 有 些 命令 的 后 面 有 省 略 号 ,表示 选择 此 命令 可 以 弹出 相应 的 对 话 框 ; 有 
些 命令 的 后 面 有 向 右 的 黑色 三 角形 ,表示 此 命令 还 有 下 一 级 菜单 ; 还 有 一 部 分 命令 显示 为 
灰色 ,表示 该 命令 当前 不 能 使 用 ,只 有 在 满足 一 定 的 条 件 之 后 才 可 使 用 。 


3. 工具 箱 


工具 箱 默认 位 于 界面 左 侧 ,通过 单 击 工具 箱 上 部 的 双 箭头 可 以 使 工具 箱 中 的 工具 排列 
在 单列 和 双 列 间 进 行 转换 。 工 具 箱 中 包含 了 用 于 图 像 处 理 和 图 形 绘制 的 各 种 工具 。 

如 果 要 查看 工具 的 名 称 ,可 将 鼠标 指针 移 至 该 工具 处 , 稍 等 片刻 ,系统 将 自动 显示 工具 
名 称 的 提示 。 工 具 箱 中 有 些 工具 按钮 的 右 下 角 带 有 黑色 的 小 三 角 符 号 ,表示 该 工具 还 隐藏 
有 其 他 同类 工具 ,将 鼠标 指针 移 至 此 类 按钮 上 按 下 鼠标 左 键 不 放 ,隐藏 工具 即 会 显示 出 来 。 
在 隐藏 的 工具 组 中 选择 所 需 的 工具 , 则 该 工具 将 成 为 当前 工具 。 
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4. 工具 选项 栏 


工具 选项 栏 (以 下 简称 选项 栏 ) 位 于 菜单 栏 上 方 ,其 功能 是 显示 工具 箱 中 当前 被 选择 工 
具 的 相关 参数 和 选项 ,以 便 对 其 进行 具体 设置 。 

5. 面板 区 

面板 区 默认 位 于 界面 右 侧 ,主要 用 于 存放 Photoshop CS6 提供 的 功能 面板 (以 下 简称 面 


板 ) 。Photoshop CS6 共 提 供 了 28 种 面板 ,利用 这 些 面板 可 以 对 图 层 、 通 道 \ 工 具 、 色 彩 等 进 
行 设置 和 调整 ,用 户 可 以 利用 菜单 栏 中 的 [窗口 命令 显示 和 隐藏 面板 。 


6. 图 像 窗 口 


在 Photoshop CS6 中 ,图 像 窗口 默认 以 选项 卡 的 方式 显示 所 打开 的 图 像 文件 , 拖 忠 可 
以 使 图 像 窗 口 浮动 。 在 浮动 的 图 像 窗口 中 ,最 上 方 的 标题 栏 中 显示 图 像 的 相关 信息 , 例 
如 图 像 的 文件 名 称 、 文 件 类 型 .显示 比例 、 目 前 所 在 图 层 以 及 所 使 用 的 颜色 模式 和 位 深 
度 等 。 


7. 状态 栏 


状态 栏 位 于 图 像 窗 口 的 最 下 方 ,显示 当前 图 像 的 状态 及 操作 命令 的 相关 提示 信息 。 其 
中 ,最 左 侧 的 数值 显示 当前 图 像 的 百分比 ,用 户 可 以 通过 直接 修改 这 个 数值 来 改变 图 像 的 显 
示 比 例 ; 显示 百分比 的 右 侧 是 当前 图 像 文 件 的 信息 , 单 击 文件 信息 右 侧 的 按钮 会 弹出 扩展 
菜单 ,如 图 2-4 所 示 , 可 以 改变 对 当前 文档 的 设置 。 
100% Pel 文档 :10.4KJ0 字 节 


Adobe Drive 
v 文档 大 小 


图 2-4 状态 栏 菜单 


以 上 介绍 的 是 Photoshop CS6 的 默认 界面 ,为 了 操作 方便 ,用 户 可 以 对 界面 中 各 部 分 的 
位 置 进行 调整 , 当 需 要 时 可 以 将 工具 箱 .选项 栏 和 面板 区 进行 隐藏 。 

将 鼠标 指针 移 到 工具 箱 .选项 栏 .面板 区 或 图 像 窗口 最 上 方 的 标题 栏 上 , 拖 电 鼠标 可 
以 移动 它们 的 位 置 。 选 择 【 窗 口 3 菜 单 . 在 弹出 的 下 拉 菜 单 中 选择 或 取消 相应 的 面板 ,可 
以 分 别 将 各 面板 显示 或 隐藏 。 按 Tab 键 , 可 以 将 工具 箱 .选项 栏 和 所 有 面板 同时 显示 或 
隐藏 ; 在 按 住 Shift 键 的 同时 按 Tab 键 ,可 以 将 界面 窗口 中 的 所 有 面板 同时 显示 或 隐藏 。 
选择 菜单 栏 中 的 [窗口 II【 工 作 区 】I【 复 位 基本 功能 命令 ,可 以 使 界面 恢复 到 初始 默认 
状态 。 
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@.3 Photoshop CS6 的 基本 操作 


下 面 介绍 Photoshop 文件 的 建立 及 保存 文件 的 显示 等 基础 操作 。 
2.3.1 文件 的 新 建 


选择 菜单 栏 中 的 [文件 3I[ 新 建 ] 命 令 , 在 弹出 的 [新 建 ] 对 话 框 中 进行 参数 设置 ,然后 单 
击 【确定 了 按钮 完成 文件 的 新 建 ,如 图 2-5 所 示 。 


L_ 存储 预 设 G).，j 
删除 预 设 (D) 


分 辩 素 (R): 


颜色 模式 (M): | RGB 颜色 园 


背景 内 容 (5); | 白色 


高 级 


图 2-5 【新 建 ] 对 话 框 


在 【新 建 ] 对 话 框 中 可 对 所 建文 件 进行 如 下 设 定 : 

在 [名称] 文本 框 中 可 输入 图 像 名 称 。 

在 [ 预 设 J 下 拉 列 表 中 可 选择 一 些 内 定 的 图 像 尺寸 。 

在 [宽度 】【 高 度 ] 和 [分 辩 率 ] 文 本 框 中 可 输入 自 定 的 尺寸 和 分 辩 率 ,在 文本 框 右 侧 
的 下 拉 列 表 中 还 可 以 选择 不 同 的 度量 单位 。 分 辨 率 的 单位 一 般 采 用 “像素 /英寸 ”， 
如 果 制 作 的 图 像 用 于 印刷 , 需 设 定 “300 像素 /英寸 "的 分 辩 率 。 

在 【颜色 模式 】 下 拉 列 表 中 可 设 定 图 像 的 色彩 模式 。 

在 【背景 内 容 】 下 拉 列 表 中 可 选择 新 建 图 像 的 背景 颜色 ,包括 “白色 ”“ 背 景色 "和 * 透 
明 ”3 种 类 型 。 


2.3.2 文件 的 存储 


文件 的 存储 命令 主要 包括 [存储 ] 和 【存储 为 两 种 。 在 对 新 建 的 文件 编辑 后 进行 存储 ， 
使 用 这 两 种 命令 操作 是 一 样 的 ,都 是 为 当前 文件 命名 并 进行 保存 ; 但 车 对 打开 的 文件 进行 
编辑 后 保存 ,就 要 区 分 [存储] 和 【存储 为 命令, 前 者 是 将 文件 以 原文 件 名 进行 保存 ,而 后 者 
是 将 修改 后 的 文件 重新 命名 进行 保存 ,如 图 2-6 所 示 。 


17 


MA 


Web 前 端 开发 及 应 用 教程 


新 建 o) 
打开 0)... 
在 Bridge 中 浏览 B).. 
打开 为 


打开 为 智能 对 和 象 .. 
最 近 打 开 文件 () 


ctrlty 上 


Ctrlt0 
和 ttCtrlt0 


各 thShifttCtrlt0 


关闭 人 C) 


Ctrl 


ALttCtrlth 


Ctrlt+ 


关闭 全 部 
关闭 并 转 到 Bridge 
存储 B) Ctrlts rsa 


Ctrl40 


存储 为 以 ) Shi fttCtrl+S 
莹 入 O) Ctrl+1 
存储 为 Yeb 所 用 格式 如 ttShiftiCtrltS _ 打 Rdm 
僚 复 GD 2 屏息 模式 0) 4 
置 和 0D) 显示 额外 内 容 X) CemlHH 
导入 0 2 
导出 人 E) 4 标尺 R) CtrltR 
对 齐 到 (7) 人 
文件 简介 如 thShifttCtrltI | 证 定 参考 线 (C) 和 LttCtrlt; 
(EC.7 ye ， 和 和 
打印 一 份 iD) 各 t+Shi ftyCtrl+P 新 建 彬 考 线 了 ) ， 
镇 定 切片 人) 
退出 CD CtrltQ 清除 切片 fr) 
图 2-6 文件 的 存储 图 2-7 缩放 命令 
有 ~ 1 
2.3.3 图 像 的 浏览 


在 Photoshop 的 [视图 菜单 下 有 很 多 命令 用 来 控制 图 像 的 不 同 显示 比 例 , 如 图 2-7 所 
示 。 一 个 图 像 的 最 大 显示 比例 是 3200%, 最 小 则 显示 一 个 像素 。 注 意 ,使 用 这 些 命令 只 是 
放大 或 缩小 了 图 像 的 显示 比例 ,并 没有 真正 地 改变 图 像 的 尺寸 ,用 户 也 可 使 用 相应 的 快捷 键 
完成 图 像 的 缩放 。 


1.【 放 大 】 与 [缩小] 命令 


选择 [视图 ] 菜 单 下 的 [放大 】 与 [缩小] 命令 ,可 以 改变 当前 图 像 的 显示 比例 。 每 使 用 一 
次 [放大 3 或 [缩小 ] 命 令 , 图 像 的 显示 尺寸 就 会 在 原来 的 基础 上 放大 一 倍 或 缩小 为 原来 的 
1/2。 


2.【 按 屏幕 大 小 缩放 】 


选择 [视图 ] 菜 单 下 的 [ 按 屏幕 大 小 缩放 ] 命 令 , 或 双击 工具 箱 中 的 抓 手 工具 图 标 ,可 以 按 
屏幕 大 小 显示 当前 图 像 的 最 大 比例 。 

全 屏 显示 会 受到 工具 箱 和 面板 的 限制 , 当 工 具 箱 和 面板 以 默认 位 置 分 布 在 屏幕 两 侧 时 ， 
全 屏 显示 会 自动 让 出 屏幕 两 侧 的 位 置 ,而 以 一 个 较 小 的 图 像 窗 口 来 显示 整 幅 图 像 ,只 有 当 关 
闭 或 隐藏 所 有 的 工具 箱 和 面板 时 才能 真正 在 屏幕 上 实现 全 屏 显示 。 


3.【 实 际 像素 】 
【实际 像素 ] 表 示 以 一 个 显示 器 的 屏幕 像素 对 应 一 个 图 像 像 素 时 的 显示 比例 , 即 100% 
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的 显示 比例 。 直 接 选 择 [ 视 图] 衣 单 下 的 [实际 像素 命令 ,或 单 击 工具 箱 中 的 缩放 工具 图 标 ， 
便 可 以 按 100% 的 实际 像素 显示 。 


4.【 打 印 尺寸 】 


使 用 [视图 ] 菜 单 下 的 [打印 尺寸 命令 可 以 在 屏幕 上 显示 出 图 像 的 实际 打印 大 小 。 
实际 打印 尺寸 不 考虑 图 像 的 分 辨 率 ,而 是 以 图 像 本 身 的 宽度 和 高 度 (打印 时 的 尺寸 ) 来 
表示 一 幅 图 像 的 大 小 。 


5. 缩放 工具 


使 用 缩放 工具 可 以 将 图 像 成 比例 地 放大 或 缩小 ,以 便于 用 户 对 图 像 进行 观察 和 修改 。 

在 选择 缩放 工具 时 ,鼠标 指针 在 图 像 窗 口内 显示 为 一 个 带 加 号 的 放大 镜 , 单 击 即 可 实现 
图 像 的 成 倍 放大 。 在 按 住 Alt 键 使 用 放大 工具 时 ,鼠标 指针 变 为 一 个 带 减 号 的 缩小 镜 , 单 击 
可 将 图 像 按 50% 缩 小 。 


6. 抓 手 工具 


Photoshop 工作 区 的 范围 是 有 限 的 , 当 需 要 对 图 像 的 局 部 进行 精细 处 理 时 ,有 时 需要 将 
图 像 放大 显示 到 超出 图 像 窗 口 的 范围 ,此 时 图 像 在 窗口 内 无 法 完全 显示 ,利用 工具 箱 中 的 抓 
手工 具 可 以 在 窗口 中 移动 图 像 对 其 进行 局 部 观察 和 修改 。 


7.【 导 航 器 ] 面 板 


【导航 器 面板 是 用 来 观察 图 像 的 ,可 方便 用 户 对 图 
像 进行 缩放 ,如 图 2-8 所 示 。 在 面板 的 左下 角 显 示 百 分 
比 数字 ,用 户 可 直接 输入 值 , 按 Enter 键 确 认 后 ,图 像 即 
会 按照 相应 的 百分比 显示 ,在 导航 器 中 会 有 相应 的 预览 
图 ; 也 可 以 用 鼠标 拖 奥 导航 器 右 下 方 的 三 角 滑 块 来 改变 
缩放 比例 。 单 击 左 侧 较 小 的 图 标 可 以 使 图 像 缩 小 显示 ， 
单 击 右 侧 较 大 的 图 标 可 以 放大 显示 。 图 2-8 【导航 器 ] 面 板 


2.3.4 面板 的 显示 与 隐藏 


在 [窗口 ] 菜 单 中 有 一 部 分 面板 命令 的 左 侧 显示 有 对 号 ,说 明 此 面板 目前 在 工作 区 中 人 处 
于 显示 状态 ; 没有 显示 对 号 的 面板 命令 ,说 明 相应 面板 已 被 关闭 ,处 于 隐藏 状态 ,如 图 2-9 
所 示 。 

选择 [窗口 ] 菜 单 中 的 某 一 面板 命令 ,使 其 左 侧 显 示 对 号 ,表示 显示 相应 面板 ; 再 次 选 
择 , 使 其 左 侧 不 显示 对 号 ,表示 隐藏 相 应 面板 。 


2.3.5 标尺 、 网 格 和 参考 线 


标尺 、 网 格 和 参考 线 是 Photoshop CS6 中 的 帮助 工具 ,使 用 的 频率 非常 高 。 用 户 使 用 这 
3 种 工具 可 以 给 图 形 绘制 和 图 像 处 理 带 来 极 大 的 方 使 ,可 以 帮助 用 户 精确 地 定位 和 对 齐 对 象 。 
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段落 
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V 1 aeT5323d6b6de243-lalee6cgb75bTe2e-fbbaad3ca3a9143b55cac3lcb6168e7b3- 人 恢复. 


图 2-9 【窗口 菜单 


1. 标尺 
选择 菜单 栏 中 的 【视图 人 民 标 尺 ] 命 令 ,在 图 像 窗 口 的 左边 和 上 


| 
» 


边 会 显示 标尺 ， 当 再 次 选择 此 命令 时 ,可 以 将 标尺 隐藏 ,如 图 210 BE 品 。cwm 
所 示 。 访 表 长虹 比 G) 
像素 长 宽 比 校正 ) 
32 位 预览 选项 
2 网 格 放大 (I) Ctrltt 


加 ) 
选择 菜单 栏 中 的 [视图 JIK 显示】IK 网 格 ] 命 令 , 在 当前 文件 的 | 王 凡 ”ca 
图 像 窗口 中 会 显示 出 网 格 ， 当 再 次 选择 该 命令 时 ,可 以 将 网 格 pamzw 


隐藏 vv 显示 额外 内 容 00) CtrlH 
显示 00 上 


标尺 加) CtrlHR 
3. 参考 线 FD Shifucult, 
» 


对 齐 到 (T) 
将 标尺 显示 在 视图 窗口 中 ,将 鼠标 指针 放 在 标尺 的 位 置 , 按 住 | es 名。 ve 
鼠标 左 键 向 外 拖 忠 , 即 可 添加 参考 线 。 0 
选择 菜单 栏 中 的 【视图 了 代 新 建 参考 线 】 命 令 , 可 弹出 【新 建 参 “La 
考 线 对话 框 ,在 此 对 话 框 中 设置 参考 线 的 方向 ,并 直接 以 输入 数 
值 的 方式 确定 参考 线 的 位 置 。 
选择 菜单 栏 中 的 [视图 〗】I【 锁 定 参考 线 ] 命 令 , 可 将 所 有 的 参考 线 锁 定 。 当 拖 中 参考 线 到 
图 像 窗 口 之 外 时 释放 鼠标 左 键 , 即 可 将 其 删除 。 选 择 菜单 栏 中 的 [视图 】I【 清 除 参考 线 ] 命 
令 , 可 以 将 图 像 窗 口中 的 所 有 参考 线 全 部 删除 。 


2-10 【视图 了 荣 单 
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2.4 综合 应 用 


、 


2.4.1 界面 颜色 的 修改 


Photoshop CS6 默认 窗口 界面 的 颜色 为 黑色 ,如 果 想 调整 界面 颜色 , 则 需要 选择 菜单 栏 
中 的 【编辑 了 区 首 选项 了 区 界 面 】 命 令 , 打 开 【 界 面 3 对 话 框 , 如 图 2-11 所 示 。 在 【外 观 ] 中 选择 
用 户 想 应 用 的 颜色 ,如 果 以 前 用 过 Photoshop 的 其 他 版 本 ,一 般 会 选择 浅 灰 色 。 


| 口 B 折 得 图 标 面板 (8) 
| 回 自动 显示 隐 间 面板 (H) 
回 项 卡 方式 打开 文 档 (D) 
| 回 启用 泛 动 交 档 窗口 信 让 (0) 加 启用 文本 投影 
| 口 彩色 是 示 反省 (C) 
| 时 雪 从 V): [右上 国 
| 


恢复 了 X 认 工作 区 (R) 


三 文本 
用 户 界 面 汪 言 人 ): | 简体 中 文 。 国 
用 户 界面 字 伟大 小 (E): | 中 
| 二 更 羽 格 在 下 一 次 局 动 photoshop 时 生效 。 


图 2-11 【界面 ] 对 话 框 


2.4.2 网 格 线 的 设置 


如 果 想 对 网 格 间隔 、 颜 色 进 行 更 改 , 需 要 选择 菜单 栏 中 的 【编辑 】 代 首选 项 人 参考 
线 、 网 格 和 切片 3 命令 ,打开 【参考 线 、 网 格 和 切片 对 话 框 进行 相应 的 设置 ,如 图 2-12 
所 示 。 


| 
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图 2-12 【参考 线 、 网 格 和 切片 ] 对 话 框 


2.4.3 【首选 项 ] 命 令 


选择 菜单 栏 中 的 【编辑 了 区 首 选项 命令 ,在 打开 的 级 联 菜单 中 可 以 对 Photoshop 软件 进 
行 初始 化 设置 ,包括 对 内 存 、 暂 存盘 .历史 记录 、 标 尺 ` 光 标 等 进行 初始 化 设置 ,如 图 2-13 


所 示 。 
Aushietcuatx 图 
和 t+Shift+fCtrl4 间 


光标 CC) 
透明 度 与 色 域 了 ) 


单位 与 标尺 0 

参考 线 、 网 格 和 切片 GS) 
增 效 工具 B) 

文字 0) 


Caners Raw 加) 


图 2-13 【首选 项 ] 命 令 
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NA 
2.4.4 ”显示 与 隐藏 浮动 面板 


在 图 2-14 所 示 的 [窗口 菜单 中 选择 任意 面板 命令 , 则 将 此 面板 显示 ,如 图 2-15 所 示 ， 
其 面板 命令 前 有 对 号 显示 ; 再 次 选择 该 命令 ,对 号 消失 , 则 该 面板 隐藏 。 


v 选项 
Y 工 具 


1 未 标题 -1- 恢 复 的 
v 2 未 标题 -2- 恢 复 的 


图 2-14 【窗口 菜单 图 2-15 显示 的 浮动 面板 


Photoshop 工 具 的 应 用 | 


本 章 学 习 目 标 : 
避 了 解 Photoshop 工具 箱 中 的 各 种 工具 。 
局 掌握 Photoshop 工具 箱 中 常用 工具 的 使 用 。 


6.i 选区 工具 


在 Photoshop 中 所 做 的 操作 都 是 对 选区 有 效 的 ,选区 在 Photoshop 中 表现 为 由 滚动 的 
虚线 (俗称 蚂蚁 线 ) 围 成 的 区 域 。 


3.1.1 选 框 工具 


选 框 工具 包括 矩形 选 框 工具 、 椭 圆 选 框 工具 、 单 行 选 框 工具 、 单 列 选 框 工具 。 在 工具 箱 
中 按 住 选 框 工具 不 放 , 将 弹出 图 3-1 所 示 的 工具 列表 。 

在 列表 中 选择 要 使 用 的 工具 ,然后 在 图 像 中 拖 动 鼠标 ,会 出 
现 一 个 虚线 框 ,我 们 称 之 为 选 框 , 选 框 内 的 部 分 就 是 选区 ,后 续 进 
行 的 所 有 操作 只 对 选区 内 的 图 像 起 作用 。 3 


1. 选 框 工具 选项 栏 图 3-1 选 框 工具 列表 
在 使 用 选 框 工具 时 ,其 选项 栏 如 图 3-2 所 示 。 


i -| 国语 | kspe | DW | te: [Ex  :] zxg[ | 之 mg ”| | [sas-] cs 人 功 能 


图 3-2 选 框 工具 选项 栏 


单 击 [ 新 选区 3 按钮 在 图 像 中 创建 选区 ,新 的 选区 将 代替 原来 的 选区 。 
单 击 【添加 到 选区 按钮 在 图 像 中 创建 选区 ,新 创建 的 选区 与 原来 的 选区 合并 为 新 的 


选区 。 
。 单 击 [ 从 选区 减 去 了 按钮 ,如 果 新 创建 的 选区 与 原来 的 选区 有 相交 部 分 , 则 从 原 选 区 
中 减 去 相交 部 分 。 


单 击 【与 选区 交叉 按钮 ,如 果 新 创建 的 选区 与 原来 的 选区 有 相交 部 分 , 则 保留 相交 
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。 羽化 : 决定 选区 边缘 的 柔 化 程度 ,可 以 在 数值 框 内 输入 羽化 的 数值 ,其 取 值 范围 为 
0~255。 

。 消除 锯齿 : 勾 选 此 复 选 框 ,可 以 使 边缘 看 起 来 柔和 ,达到 抗 句 齿 的 目的 。 

。 样式 : 此 下 拉 列 表 中 有 3 个 选项 ,选择 [正常 ] 选 项 ,可 以 在 图 像 中 创建 任意 大 小 与 比 
例 的 选区 ; 选择 [固定 比例 ] 选 项 ,可 以 设置 将 要 创建 选区 的 宽度 与 高 度 的 比例 ; 选 
择 【固定 大 小 ] 选 项 ,可 以 设置 将 要 创建 选区 的 宽度 和 高 度 值 。 

“【 调 整 边 缘 】〗: 可 以 重新 设置 选区 的 边缘 效果 。 


2. 选区 的 基本 操 件 


如 果 当 前 图 像 中 没有 选区 ,选择 工具 箱 中 的 选 框 工具 建立 特殊 选区 ,基本 操作 方法 
如 下 : 

。 按 住 Shift 键 不 放 , 在 图 像 中 拖 电 鼠标 指针 ,可 以 在 图 像 中 创建 正方 形 或 圆 形 选区 。 

。 按 住 Ctrl 键 不 放 , 在 图 像 中 拖 忠 鼠标 指针 ,可 以 生成 一 个 以 鼠标 指针 落 点 为 中 心 的 

取消 选区 的 常用 方法 有 两 种 ,一 种 是 选择 菜单 栏 中 的 【选择 】 民 取消 选择 】 命 令 , 另 一 种 
是 按 Ctrl+D 键 。 


3.1.2 移动 工具 


如 果 想 调整 各 图 层 图 像 间 的 相对 位 置 ,必须 要 用 到 工具 箱 中 的 移动 工具 。 移 动工 具 主 
要 用 于 将 某 些 特定 的 图 像 进行 移动 、 复 制 ,这 一 操作 可 以 在 同一 幅 图 像 中 进行 ,也 可 以 在 不 
同 的 图 像 间 进行 。 利 用 该 工具 还 可 以 方便 地 对 链接 图 层 进行 对 齐 、 平 均 分 布 以 及 对 图 像 进 
行 变 形 等 操作 。 

在 工具 箱 中 选择 移动 工具 后 ,其 选项 栏 如 图 3-3 所 示 。 


Pe -| 口 自动 和 染 ; [ 担 。:] | 口 8 去 的 村 重 | 机 扣 有 尼采 旺 | 码 全 二 名 起 时 | 器 Cs 肌 和 功能 


图 3-3 移动 工具 选项 栏 


移动 工具 选项 栏 中 的 选项 有 三 部 分 功能 , 即 自动 选择 要 移动 的 图 层 或 组 自由 变形 、 对 
齐 和 分 布 图 层 。 


1. 自动 选择 图 层 


【自动 选择 J 下 拉 列 表 框 中 有 【图 层 ] 和 [组 两 个 选项 。 勾 选 【自动 选择 ] 复 选 框 并 在 下 拉 
列表 框 中 选择 [图 层 ] 选 项 , 则 可 以 利用 移动 工具 在 图 像 中 单 击 自动 选择 鼠标 指针 所 在 位 置 
上 第 一 个 有 可 见 像 素 的 图 层 并 进行 变换 ; 如 勾 选 【自动 选择 ] 复 选 框 并 在 下 拉 列 表 框 中 选择 
【组 3 选项 , 则 可 以 通过 单 击 选择 成 组 图 层 中 的 某 一 个 图 层 中 的 像素 来 选择 成 组 图 层 ,在 变换 
时 会 对 该 成 组 图 层 中 的 所 有 图 层 都 产生 作用 。 


2. 利用 移动 工具 变形 
利用 移动 工具 可 以 对 一 些 图 像 的 大 小 和 角度 进行 调整 , 即 对 图 像 进行 变形 修改 。 
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1) 利用 移动 工具 对 图 像 进行 自由 变形 

在 图 像 窗 口中 选择 要 进行 变形 的 图 像 ,或 者 当前 图 层 不 是 背 
景 层 时 选择 移动 工具 ,在 选项 栏 中 色 选 【显示 变换 控件 复 选 框 ， 
图 像 就 会 出 现 变 换 控件 框 ,变换 控件 框 的 4 条 边 上 的 小 矩形 称 为 
调节 点 , 虚 连 线 称 为 边线 ,中 间 的 控 点 称 为 参考 点 ,如 图 3-4 所 
示 。 将 鼠标 指针 移动 到 变换 控件 框 的 调节 点 或 边线 上 单 击 , 当 变 
换 控件 框 变 为 实 线 框 时 ,可 以 对 框 内 的 图 像 进行 变形 修改 。 

(1) 设置 参考 点 的 位 置 : 

参考 点 是 变形 的 基准 ,在 图 像 窗 口中 直接 拖 动 参考 点 可 以 调 图 3-4 变形 控件 杠 
整 参考 点 的 位 置 。 


(2) 缩放 : 
O 将 鼠标 指针 移 至 变换 控件 框 的 调节 点 上 , 拖 动 鼠标 可 以 对 图 像 进行 任意 缩放 
变形 。 


@ 将 鼠标 指针 移 至 变换 控件 框 的 边线 上 , 拖 动 鼠标 可 以 对 图 像 进行 水 平 或 垂直 缩放 


下 


@ 按 住 Alt 键 ,将 鼠标 指针 移 至 变换 控件 框 的 调节 点 上 拖 动 ,可 以 对 图 像 以 参考 点 为 
基准 进行 对 称 缩放 。 

@ 按 住 Shift 键 ,将 鼠标 指针 移 至 变换 控件 框 的 4 个 角 的 调节 点 上 拖 动 ,可 以 对 图 像 进 
行 等 比例 缩放 。 

(3) 旋转 : 

Oz 将 鼠标 指针 移 至 变换 控件 框 的 边线 或 调节 点 上 , 拖 动 鼠标 可 以 对 图 像 以 参考 点 为 中 
心 进行 旋转 。 

@ 按 住 Shift 键 ,将 鼠标 指针 移 至 变换 控件 框 的 边线 上 , 拖 动 鼠 标 可 以 对 图 像 以 参考 点 
为 中 心 , 按 15" 的 增 量 进行 旋转 。 

(4) 斜 切 (调节 点 只 能 在 水 平 或 垂直 方向 上 移动 ) : 

按 住 Ctrl 十 Shift 键 ,将 鼠标 指针 移动 至 变换 控件 框 的 调节 点 上 , 拖 动 可 以 对 图 像 进行 
拉 伸 ; 将 鼠标 指针 移动 至 变换 控件 框 的 边线 上 , 拖 动 鼠 标 可 以 对 图 像 进行 倾斜 变形 。 

(5) 扭曲 (调节 点 可 以 任意 移动 位 置 ): 

按 住 Ctrl 键 调整 变换 控件 框 的 调节 点 ,可 以 对 图 像 进 行 扭曲 变形 。 

(6) 透视 (调节 点 的 位 置 对 称 变化 ) 。 

按 住 Ctrl 十 Shift 十 Alt 键 调整 【变换 控件 了 框 的 调节 点 ,可 以 使 图 像 产 生 透 视 效 果 。 

2) 利用 移动 工具 对 图 像 进行 精确 变形 

选择 工具 箱 中 的 移动 工具 ,并 勾 选 【显示 变换 控件 ] 复 选 框 ,在 图 像 中 显示 变换 控件 框 。 
将 鼠标 指针 移动 至 变换 控件 框 的 调节 点 或 边线 上 单 击 , 当 变 换 控 件 框 显 示 为 实 线 框 时 ,选项 
栏 中 的 内 容 如 图 3-5 所 示 。 
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图 3-5 变换 控件 选项 栏 
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该 选项 栏 中 各 选项 的 功能 如 下 。 

【参考 点 位 置 】: 此 图 标 中 的 黑 点 表示 当前 图 像 中 参考 点 的 位 置 。 

【设置 参考 点 的 水 平和 垂直 位 置 】: 修改 其 X、Y 的 数值 可 以 精确 地 定位 调节 中 心 的 
坐标 ,其 单位 是 像素 。 

【设置 水 平和 垂直 缩放 比例 】: 修改 W、H 的 数值 可 以 精确 地 对 图 像 在 水 平和 垂直 方 
向 上 进行 缩放 。 

【保持 长 宽 比 】: 激活 该 按钮 ,锁定 水 平 缩放 和 垂直 缩放 使 用 相同 的 缩放 比例 ,即使 
图 像 为 等 比 缩放 。 

【旋转 】: 在 此 文本 框 中 输入 数值 控制 图 像 旋转 的 角度 。 

【 设 署 水 平和 垂直 斜 切 】: 修改 HH、V 的 数值 可 以 控制 图 像 在 水 平和 垂直 方向 上 倾斜 
的 角度 。 

【在 自由 变换 和 变形 模式 之 间 切 换 】: 激活 此 按钮 ,工具 选项 栏 将 变 成 图 3-6 所 示 的 


J] 


图 3-6 ”变形 选项 栏 


【变形 】: 默认 为 【 自 定 】 选 项 ,此 时 变换 控件 将 显示 为 自由 变换 控件 , 拖 忠 自由 变换 控件 
的 节点 . 子 柄 与 连 线 可 以 对 图 像 进行 自由 变换 。 

【取消 变换 】: 单 击 该 按钮 ,取消 对 图 像 的 变形 操作 ,也 可 以 按 Esc 键 取消 。 

【进行 变换 】: 单 击 该 按钮 ,确认 对 图 像 进行 变形 操作 。 


3. 利用 移动 工具 对 图 层 进行 对 齐 或 分 布 


在 移动 工具 选项 栏 中 利用 对 齐 与 分 布 按钮 组 也 可 以 对 齐 和 分 布 图 层 。 

1) 对 齐 图 层 

选择 多 个 图 层 ,或 者 选择 链接 图 层 中 的 某 个 图 层 之 后 ,可 以 利用 对 齐 按钮 组 对 齐 图 层 ， 
6 个 对 齐 图 层 按 钮 的 功能 与 菜单 栏 中 的 【图 层 3IK 对 齐 ] 命 令 中 的 子 菜单 命令 的 功能 相同 ,分 
别 为 【项 对 齐 】 【垂直 居中 对 齐 】、【 底 对 齐 】【 左 对 齐 】【 水 平 居中 对 齐 ] 和 【 右 对 齐 】。 

2) 分 布 图 层 

选择 两 个 以 上 的 图 层 或 选择 链接 图 层 中 的 某 个 图 层 之 后 ,可 以 利用 分 布 按钮 组 分 布 图 
层 ,6 个 平均 分 布 图 层 按钮 的 功能 与 菜单 栏 中 的 [图 层 】IK 分 布 ] 命 令 中 的 子 菜单 命令 功能 相 
同 , 分 别 为 【 按 项 分 布 ]【 重 直 居 中 分 布 ]【 按 底 分 布 ]【 按 左 分 布 ] 【水平 居 中 分 布 ] 和 【 按 右 
分 布 】。 


3.1.3 套 索 工具 

套 索 工具 组 中 包括 套 索 工具 、 多 边 形 套 索 工具 、 磁 性 套 索 工具 3 个 工具 按钮 。 

1. 套 索 工具 的 使 用 方法 和 主要 功能 

(1) 套 索 工 具 : 选择 套 索 工具 后 ,只 要 按 住 鼠标 左 键 在 图 像 上 拖 动 ,鼠标 指针 移动 的 轨 
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迹 就 是 选区 的 边界 。 套 索 工 具 的 优点 是 操作 简便 ,缺点 是 所 创建 选区 的 形状 较 难 控制 ,所 以 
该 工具 一 般 用 于 对 精确 度 要 求 不 高 的 选择 。 

(2) 多 边 形 套 索 工 具 : 选择 多 边 形 套 索 工具 后 , 沿 着 要 选择 的 图 像 边界 多 次 单 击 , 新 的 
鼠标 指针 落 点 与 前 一 个 落 点 间 会 出 现 一 条 连 线 ,然后 将 鼠标 指针 移 回 起 点 , 当 鼠 标 指针 带 圈 
时 单 击 可 闭合 连 线 ,构成 选区 。 多 边 形 套 索 工具 的 优点 是 选择 较 精确 ,缺点 是 操作 时 较 烦 
琐 ,该 工具 比较 适用 于 边界 多 为 直线 或 者 边界 曲折 复杂 的 图 案 。 

(3) 磁性 套 索 工 具 : 它 是 一 种 比较 特别 的 选择 工具 ,根据 要 选择 图 像 边 界 的 像素 点 
颜色 来 决定 选择 时 的 工作 方式 。 在 要 选择 图 像 边界 与 背景 颜色 差别 较 大 的 部 分 可 以 直 
接 沿 边界 拖 忠 鼠标 指针 ,磁性 套 索 工具 会 根据 颜色 的 差别 自动 勾画 出 选 框 ,在 颜色 差别 
不 大 的 部 分 可 以 用 多 次 单 击 的 方法 勾 选 边界 ,这 一 工具 主要 适用 于 选择 边界 分 明 的 
图 案 。 


2. 套 索 工具 选项 栏 


在 选择 套 索 工具 多边 形 套 索 工具 时 ,选项 栏 的 内 容 与 选 框 工具 选项 栏 的 相似 ,如 图 3-7 
所 示 , 比 选择 磁性 套 索 工具 时 多 了 一 些 参数 。 
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图 3-7 套 索 工具 选项 栏 


【宽度 】: 该 值 决 定 磁性 套 索 工具 在 多 宽 的 范围 内 探测 图 像 的 边界 。 磁 性 套 索 工具 
只 探测 从 鼠标 指针 开始 指定 距离 以 内 的 边缘 。 
【对 比 度 】: 该 值 指定 套 索 对 图 像 中 边缘 的 灵敏 度 , 较 高 的 值 将 探测 与 周围 对 比 强 列 
的 边缘 , 较 低 的 值 将 探测 低 对 比 度 的 边缘 。 
【频率 】: 该 值 决 定 套 索 以 什么 速率 设置 紧 固 点 ,使 用 较 高 的 数值 则 捕 提 紧 固 点 的 速 
度 更 快 ,并 且 紧 固 点 的 数量 更 多 。 
【使 用 绘图 板 压 力 以 更 改 钢笔 宽度 】: 该 选项 只 有 在 用 户 使 用 绘图 板 时 才 起 作用 。 
绘图 板 是 一 种 外 部 设备 ,可 用 手绘 的 方式 向 计算 机 中 输入 图 像 。 激 活该 选项 后 ,可 
以 在 使 用 绘图 板 时 以 落笔 的 力度 来 影响 笔画 的 粗细 。 

在 边缘 较 明显 的 图 像 上 可 以 使 用 较 大 的 宽度 值 和 较 高 的 对 比 度 值 , 在 边缘 较 柔 和 的 图 
像 上 可 以 使 用 较 小 的 宽度 值 和 较 低 的 对 比 度 值 。 

使 用 较 小 的 宽度 值 、 较 高 的 对 比 度 值 可 以 进行 较 精确 的 选择 ,使 用 较 大 的 宽度 值 . 较 小 
的 对 比 度 值 可 进行 粗略 的 选择 。 


3.1.4 魔 棒 工 具 


在 工具 箱 中 选择 魔 棒 工 具 , 设 置 适 当 的 选项 后 ,在 要 选择 的 图 像 上 单 击 , 即 可 选择 与 鼠 
标 指针 落 点 颜色 相近 的 区 域 。 该 工具 主要 适用 于 有 大 块 单 色 区 域 的 图 像 的 选择 。 


1. 魔 棒 工 具 选项 栏 


在 工具 箱 中 选择 魔 棒 工 具 , 选 项 栏 如 图 3-8 所 示 ,这 里 只 介绍 前 面 未 讲解 的 选项 。 


第 3 章 ”Photoshop 工 具 的 应 用 


; 获 -| 国外 中 后 | Wk [Rs =] 三: 区 “| 包罗 5 忆 洁 # [] af 四 E 了 样 | | 而 兰 23- ] [sm -] 


图 3-8 魔 棒 工 具 选 项 栏 


。“【 容 差 】: 容 差 取 值 范围 为 0 一 255, 这 个 参数 的 值 决定 了 选择 的 精度 ,此 值 越 大 ,选择 
的 精度 越 低 ; 此 值 越 小 ,选择 的 精度 越 高 。 

【连续 】: 勾 选 【连续 ] 复 选 框 , 则 只 能 选择 与 鼠标 指针 落 点 处 像素 颜色 相近 上 且 相 连 的 
部 分 ; 取消 勾 选 该 复 选 框 , 则 可 以 在 图 像 中 选择 所 有 与 鼠标 指针 落 点 处 像素 颜色 相 
近 的 部 分 。 

【对 所 有 图 层 取样 】: 对 于 多 图 层 的 文件 来 讲 , 一 般 情况 下 所 做 的 操作 只 对 当前 图 层 
起 作用 。 在 使 用 魔 棒 工 具 时 , 若 不 勾 选 [对 所 有 图 层 取样 ] 复 选 框 , 则 只 选择 当前 图 
层 中 颜色 相近 的 部 分 ; 若 勾 选 该 复 选 框 , 则 可 以 选择 所 有 图 层 中 可 见 部 分 的 颜色 相 
近 的 部 分 。 


2. 快速 选择 工具 


快速 选择 工具 的 功能 类 似 于 笔 刷 , 并 且 能 够 调整 圆 形 笔尖 大 小 绘制 选区 ,在 图 像 中 单 击 
并 拖 动 鼠标 即 可 绘制 选区 ,这 是 一 种 基于 色彩 差别 但 却 用 画笔 智能 查找 主体 边缘 的 新 颖 方 
法 。 快 速 选择 工具 选项 栏 如 图 3-9 所 示 。 
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图 3-9 快速 选择 工具 选项 栏 


【选区 方式 】: 3 个 按钮 从 左 到 右 分 别 是 新 选区 、 添 加 选区 、 减 去 选区 。 当 没有 选区 
时 ,默认 的 选择 方式 是 新 建 ; 在 选区 建立 后 ,自动 改 为 添加 到 选区 ; 如 果 按 住 Alt 
键 ,选择 方式 变 为 从 选区 减 去 。 

【画笔 3: 当初 选 离 边 缘 较 远 的 较 大 区 域 时 ,画笔 尺寸 可 以 大 一 些 , 以 提高 选取 的 效 
率 ; 但 对 于 小 块 的 主体 或 修正 边缘 时 则 要 换 成 小 尺寸 的 画笔 。 总 体 来 说 ,大 画笔 选 
择 快 ,但 选择 粗糙 ,容易 多 选 ; 小 画笔 一 次 只 能 选择 一 小 块 主体 ,选择 慢 ,但 得 到 的 
边缘 精度 高 。 更 改 画 笔 大 小 的 方法 是 在 建立 选区 后 按 ] 键 增 大 画笔 的 大 小 , 按 [ 键 减 
小 画笔 的 大 小 。 

【自动 增强 】: 勾 选 此 复 选 框 后 ,可 减少 选区 边界 的 粗糙 度 和 块 效应 , 即 “ 自 动 增强 ” 
使 选区 向 主体 边缘 进一步 流动 并 做 一 些 边缘 调整 。 一 般 勾 选 此 复 选 框 。 

【对 所 有 图 层 取样 3: 当 图 像 中 含有 多 个 图 层 时 , 勾 选 该 复 选 框 ,将 对 所 有 可 见 图 层 
的 图 像 起 作用 , 当 没 有 勾 选 时 , 魔 棒 工具 只 对 当前 图 层 起 作用 。 


2 绘画 与 修饰 工具 


绘画 与 修饰 工具 是 用 来 对 位 图 进行 绘制 及 修改 、 修 饰 的 工具 ,包括 画笔 ,渐变 ,历史 记录 
画笔 ,修复 工具 等 ,它们 都 是 对 位 图 有 效 、 对 矢量 图 无 效 。 
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3.2.1 画笔 工具 、 铝 笔 工 具 、 颜 色 替 换 工 具 和 混合 器 画笔 工具 


如 果 用 户 有 一 定 的 手绘 功底 ,可 以 直接 使 用 画笔 工具 和 铅笔 工具 绘制 图 形 ,使 用 这 两 个 
工具 可 以 创建 出 不 同 的 效果 。 另 外 ,用 户 还 可 以 使 用 颜色 替换 工具 对 照片 局 部 的 颜色 进行 
替换 。 


1. 画笔 工具 


使 用 画笔 工具 可 以 绘制 出 边缘 柔软 的 画笔 效果 ,画笔 的 颜色 为 工具 箱 中 的 前 景色 。 面 
笔 工具 选项 栏 如 图 3-10 所 示 。 
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3-10 画笔 工具 选项 栏 


1) 画笔 选项 

(1) 单 击 选项 栏 中 的 【画笔 了 按钮 ,在 列表 中 可 以 选择 要 使 用 的 画笔 笔尖 。 

(2) 修改 【 主 直径 ] 值 可 以 设置 笔尖 的 大 小 。 

(3) 修改 【硬度 】 值 可 以 修改 笔尖 边缘 的 柔 化 程度 。 

2) 其 他 选项 

(1) 在 【模式 】 下 拉 列 表 中 可 以 选择 画笔 工具 的 模式 ,不 同 的 模式 决定 画笔 工具 使 用 的 
颜色 以 何 种 方式 与 图 像 中 的 像素 进行 混合 。 

(2)【 不 透明 度 】 值 决定 画笔 的 透明 度 。 

(3)【 流 量 ] 值 用 来 设置 颜色 随 工 具 移动 应 用 的 速度 , 即 设置 所 绘制 线条 颜色 的 流畅 程 
度 , 它 也 可 以 产生 一 定 的 透明 效果 。 

在 工具 箱 中 选择 画笔 工具 , 按 住 Shift 键 不 放 , 在 图 像 中 拖 电 鼠 标 指针 ,可 以 创建 水 平 
或 垂直 的 线条 。 

在 工具 箱 中 选择 画笔 工具 ,在 图 像 中 的 某 一 点 单 击 , 按 住 Shift 键 不 放 , 然 后 在 另 一 点 
单 击 , 可 以 在 两 点 间 创建 一 条 直线 。 


2.【 画 笔 ] 面 板 


【 面 笔 ] 面 板 默 认 位 于 面板 区 内 , 它 提供 了 大 量 预 置 的 画笔 笔尖 形状 ,并 且 可 以 通过 
设置 不 同 的 参数 以 及 选项 生成 更 多 的 笔尖 形状 ,从 而 大 大 增强 了 Photoshop 的 绘画 功能 。 
选择 【窗口 ] 代 画笔 ] 命 令 ,或 单 击 面板 区 左 侧 的 【画笔 3 按钮 ,弹出 【画笔 】 面 板 , 如 图 3-11 
所 示 。 

1) 选择 预 设 画笔 

用 户 可 以 通过 两 种 途径 选择 当前 使 用 的 画笔 预 设 , 一 种 是 通过 选项 栏 左 侧 的 画笔 弹出 
式 面板 进行 选择 , 另 一 种 是 通过 [画笔] 面板 进行 选择 。 

2) 自 定义 画笔 

在 打开 的 【画笔 3 面板 中 选择 左 侧 的 【画笔 笔尖 形状 了 选项 ,可 以 弹出 图 3-12 所 示 的 画笔 
笔尖 形状 图 案 。 
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图 3-11 【画笔 ] 面 板 图 3-12 画笔 笔尖 形状 图 案 


单 击 [ 画 笔 3 面 板 左 侧 不 同 的 选项 名 称 ,在 右 侧 会 显示 相应 的 参数 面板 ,通过 设置 各 个 不 
同 的 参数 选项 可 以 创建 自 定义 的 画笔 笔尖 形状 。 

对 于 已 经 预存 在 【画笔 3 面板 中 的 各 个 画笔 ,可 以 对 其 选项 进行 重新 调整 ,并 将 调整 后 的 
结果 利用 【新 建 画笔 预 设 命令 存 储 为 新 的 画笔 。 

创建 任意 规则 或 不 规则 的 选区 ,车 选区 的 【羽化 ] 值 为 0px, 得 到 的 是 硬 边 画 笔 ， 如 果 用 
户 在 定义 选区 的 时 候 设置 其 他 不 同 的 [羽化 ] 值 , 则 得 到 软 边 画 笔 。 

自 定义 画笔 形状 的 大 小 可 高 达 2500X2500 像素 。 为 了 使 画笔 的 效果 更 好 ,最 好 为 画笔 
设 定 一 个 纯 白 色 的 背景 ,这 样 在 用 该 画笔 绘制 图 形 的 时 候 , 白 色 的 部 分 是 透明 的 。 在 自制 画 
笔 时 最 好 使 用 灰 度 色彩 ,画笔 颜色 是 由 当前 使 用 的 前 景色 来 确定 的 ,这 里 只 定义 了 画笔 的 笔 

3) 画笔 选项 设 定 

(1)【 画 笔 笔尖 形状 了 类 参数 : 

在 【画笔 了 面板 左 侧 选择 【画笔 笔尖 形状 了 选 项 , 右 侧 显示 出 画笔 笔尖 形状 图 案 选项 ,如 
图 3-11 所 示 ,同时 在 下 方 还 可 以 预览 设置 后 的 效果 。 各 部 分 的 功能 介绍 如 下 。 

a 在 右 侧 上 方 的 笔尖 形状 列表 中 单 击 相应 的 笔尖 形状 即 可 将 其 选择 。 

@【 直 径 】 值 用 来 控制 画笔 的 大 小 :用户 可 以 直接 修改 文本 框 中 的 数值 ,也 可 以 拖 动 其 
下 方 的 滑 块 来 改变 数值 。 

@ 在 修改 【直径 】 值 后 , 单 击 【取样 大 小 按钮 ,可 以 将 其 恢复 为 默认 值 (使 用 圆 形 笔尖 时 
不 显示 该 按钮 ) 。 
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@ 勾 选 【翻转 X】 和 【翻转 Y] 复 选 框 ,可 以 分 别 将 笔尖 形状 进行 水 平和 垂直 翻转 。 

@ 设置 [5 角度】 值 , 则 将 笔尖 以 相应 的 角度 逆 时 针 旋 转 。 

设置 [ 圆 度 ] 值 , 则 将 笔尖 以 相应 的 比例 在 竖 轴 缩放 。 

Q@【 硬 度 ] 值 只 对 那些 边缘 有 虚 化 效果 的 笔尖 有 效 ,【 硬 度 ] 值 越 大 ,画笔 边缘 越 清 晰 ; 
【硬度 ] 值 越 小 ,画笔 边缘 越 模糊 、 柔 和 。 

@ 当 勾 选 【间距 ] 复 选 框 时 ,其 右 侧 文本 框 中 的 值 表示 画笔 每 两 笔 之 间 跨 越 画 笔直 径 的 
百分数 ,取消 色 选 时 ,在 图 像 中 画 线 的 形态 与 拖 忠 鼠标 指针 的 速度 有 关 , 拖 忠 越 快 ,画笔 每 两 
笔 之 间 的 跨度 就 越 大 , 拖 忠 越 慢 ,画笔 每 两 笔 之 间 的 跨度 就 越 小 。 

(2)【 形 状 动态 ] 类 参数 : 

对 于 【形状 动态 选项 下 的 几 个 参数 ,可 以 在 上 一 步 绘 制 画笔 的 基础 上 更 加 详细 地 设置 
面 笔 的 外 观 , 例 如 [大 小 拌 动 ]【 控 制 ] 【最 小 直径 】【 角 度 拌 动 )、【 圆 度 拌 动 【最 小 圆 度 】 
等 ,通过 对 这 些 参 数 进行 设置 可 以 产生 不 同 的 画笔 效果 。 

(3)【 散 布 ] 类 参数 : 

通过 调整 【散布 3 类 参数 可 以 设置 笔尖 沿 鼠 标 指针 拖 电 的 路 线 向 外 扩散 的 范围 ,从 而 使 
画笔 工具 产生 笔触 散射 效果 。 在 【画笔 3 面板 左 侧 选择 【散布 ] 选 项 ,并 将 其 他 选项 的 勾 选取 
消 ,通过 调节 相应 参数 值 的 大 小 可 以 得 到 不 同 的 画笔 效果 。 这 个 选项 只 适合 绘制 特殊 图 形 ， 
像 星 星之 类 的 效果 。 

(4)【 纹 理 ] 类 参数 : 

通过 设置 [纹理 ] 类 参数 可 以 在 画笔 中 产生 图 案 纹理 效果 。 

(5)【〖【 双 重 画 笔 ] 类 参数 : 

设置 【双重 画笔 ] 类 参数 和 选项 是 在 已 经 选 好 的 画笔 上 再 增加 一 个 不 同样 式 的 画笔 ,可 
以 产生 两 种 不 同 纹理 相交 的 笔尖 效果 。 

(6)【 颜 色 动态 ] 类 参数 ， 

设置 [颜色 动态 ] 类 参数 可 以 使 笔尖 产生 两 种 颜色 或 图 案 进行 不 同 程度 混合 的 效果 ,并 
且 可 以 调整 其 混合 颜色 的 色调 .饱和 度 及 明亮 度 等 。 这 类 参数 的 设置 在 【画笔 3 面板 中 看 不 
出 笔尖 的 变化 ,只 有 在 绘制 图 像 时 才能 看 出 效果 。 

(7)【 其 他 动态 ] 类 参数 : 

【其 他 动态 ] 类 参数 可 以 设置 画笔 绘制 出 的 颜色 的 不 透明 度 和 使 颜色 之 间 产 生 不 同 的 流 
动 效果 。 

(8) 其 他 选项 设置 : 

除了 前 面 介 绍 的 参数 和 选项 外 ,在 【画笔 了 面板 左 侧 还 有 以 下 几 个 选项 。 

勾 选 【[ 杂 色 】 复 选 框 可 以 使 画笔 产生 一 些小 碎 点 的 效果 。 

勾 选 【 湿 边 ] 复 选 框 可 以 使 画笔 绘制 出 的 颜色 产生 中 间 淡 、 四 周 深 的 润 湿 效 果 , 可 以 
来 模拟 加 水 较 多 的 颜料 产生 的 效果 。 

勾 选 [ 喷 枪 ] 复 选 框 可 以 模拟 传统 的 喷枪 ,使 画笔 产生 渐变 色调 的 效果 。 

勾 选 [平滑 ] 复 选 框 可 以 使 画笔 绘制 出 的 颜色 边缘 较 平滑 。 

勾 选 【保护 纹理 】 复 选 框 , 当 使 用 复位 画笔 3 等 命令 对 画笔 进行 调整 时 ,保护 当前 画 
笔 的 纹理 图 案 不 改变 。 


第 3 章 ”Photoshop 工 具 的 应 用 


3. 铅笔 工具 


使 用 铅笔 工具 可 以 绘制 出 硬 边 的 线条 ,如 果 是 斜 线 ,会 带 有 明显 的 锯齿 ,绘制 的 线条 颜 
色 为 工具 箱 中 的 前 景色 ,在 工具 箱 中 选择 铅笔 工具 ,其 选项 栏 如 图 3-13 所 示 。 
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图 3-13 铅笔 工具 选项 栏 


铅笔 工具 的 选项 设置 与 画笔 工具 的 基本 相同 ,只 是 在 使 用 铅笔 工具 时 ,【 夯 笔 ] 面 板 中 的 
所 有 画笔 都 不 产生 虚 边 放 果 ,所 以 在 【画笔 3 选项 列表 中 选择 【硬度 选项 对 笔尖 效果 不 起 作 
用 。 铅 笔 工 具 的 选项 栏 比 画笔 工具 多 了 一 个 【自动 抹 除 ] 复 选 框 ,如 果 勾 选 了 【自动 抹 除 ] 复 
选 框 ,那么 当 从 图 像 中 使 用 前 景色 的 像素 处 落笔 时 绘 出 的 颜色 将 为 背景 色 , 如 果 从 使 用 其 他 
颜色 的 像素 处 开始 落笔 , 则 依然 使 用 前 景色 。 


4. 颜色 替换 工具 
使 用 颜色 替换 工具 能 够 简化 图 像 中 特定 颜色 的 替换 ,可 以 用 校正 颜色 在 目标 颜色 上 绘 
画 。 在 处 理 照片 时 ,该 工具 常用 来 校正 图 像 中 较 小 图 像 的 偏 色 。 颜 色 蔡 换 工 具 不 能 在 颜色 
模式 为 “位 图 ” “索引 ”或 “多 通道 ”的 图 像 中 使 用 。 颜 色 替 换 工具 选项 栏 如 图 3-14 所 示 。 
ESI Ce Fa Cm Eb [ewe __] 
图 3-14 颜色 替换 工具 选项 栏 


5. 混合 器 画笔 工具 

使 用 混合 器 画笔 工具 可 以 绘制 出 逼真 的 手绘 效果 , 它 是 较为 专业 的 绘画 工具 ,通过 选项 栏 
的 设置 可 以 调节 笔触 的 颜色 、 潮 湿度 ,混合 颜色 等 ,如 同 用 户 在 绘制 水 彩 或 油画 的 时 候 随 意 地 
调节 颜料 颜色 ,浓度 ,颜色 混合 等 ,可 以 绘制 出 更 为 细腻 的 效果 图 。 其 选项 栏 如 图 3-15 所 示 。 
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图 3-15 混合 器 画笔 工具 选项 栏 


*“【 画 笔 】3: 单 击 该 按钮 ,在 打开 的 下 拉 列 表 中 调整 画笔 直径 大 小 以 及 画笔 大 小 。 

。【 显 示 前 景色 颜色 】: 单 击 右 侧 三 角 可 以 载 入 画笔 清理 画笔 .只 载 入 纯色 。 

。*【 每 次 描 边 后 载 人 画笔 】: 每 次 描 边 后 载 入 画笔 。 

“【 每 次 描 边 后 清理 Photoshop CS6 画笔 】〗: 每 次 描 边 后 清理 画笔 。 

【每 次 描 边 后 载 人 画笔 3 和 【每 次 描 边 后 清理 画笔 3 两 个 按钮 控制 了 每 一 笔 涂 抹 结束 后 对 

画笔 是 否 更 新 和 清理 ,类 似 于 画家 在 绘画 时 一 笔 过 后 是 否 将 画笔 在 水 中 清洗 。 

*【 混 合 画 笔 组 合 】: 提供 多 种 为 用 户 提前 设 定 的 画笔 组 合 类 型 ,包括 干燥 湿润、 潮湿 
和 非常 潮湿 等 。【〖 有 用 的 混合 画笔 组 合 】 下 拉 列 表 中 是 为 用 户 预先 设置 好 的 混合 画 
笔 。 当 用 户 选择 某 一 种 混合 画笔 时 ,右边 的 4 个 选择 数值 会 自动 改变 为 预 设 值 。 

“ 【潮湿 】: 设置 从 画布 拾取 的 油彩 量 , 就 像 是 给 颜料 加 水 ,设置 的 值 越 大 , 画 在 画布 上 
的 色彩 越 淡 。 
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MV 


【 载 入】: 设置 画笔 上 的 油彩 量 。 

【混合 ]: 用 于 设置 多 种 颜色 的 混合 , 当 【 潮 湿 ] 为 0 时 ,该 选项 不 能 用 。 

【流量 】: 设置 描 边 的 流动 数 。 

【启用 喷枪 模式 】: 作用 是 当 画 笔 在 一 个 固定 的 位 置 一 直 描 绘 时 ,画笔 会 像 喷枪 那样 
一 直 喷 出 颜色 。 如 果 不 启 用 这 个 模式 , 则 画笔 只 描绘 一 下 就 停止 流出 颜色 。 

【对 所 有 图 层 取 样 】: 作用 是 无 论文 件 有 多 少 个 图 层 ,都 将 它们 作为 一 个 单独 的 合并 
图 层 来 看 待 。 

【绘图 板 压 力 控制 大 小 〗: 当 用 户 选择 普通 画笔 时 , 它 可 以 被 选择 ,此 时 用 户 可 以 用 
绘图 板 来 控制 画笔 的 压力 。 


3.2.2 渐变 工具 和 油漆 桶 工具 


1. 渐变 工具 


渐变 工具 是 使 用 较 多 的 一 种 工具 ,使 用 该 工具 可 以 在 图 像 中 填充 渐变 颜色 和 透明 度 过 
渡 变 化 的 效果 。 渐 变 工具 常用 来 制作 图 像 背景 .立体 效果 和 光亮 效果 等 。 
在 工具 箱 中 选择 渐变 工具 后 ,其 选项 栏 如 图 3-16 所 示 。 
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图 3-16 渐变 工具 选项 栏 


1) 可 编辑 渐变 条 

渐变 颜色 条 中 显示 了 当前 的 渐变 颜色 , 单 击 其 右 侧 的 扩展 按钮 ,可 以 打开 一 个 弹出 式 面 
板 , 如 图 3-17 所 示 , 用 户 可 以 在 该 面板 中 选择 预 设 的 渐变 。 

单 击 【 可 编辑 渐变 条 】 ,会 弹出 【渐变 编辑 器 ] 对 话 框 ,如 图 3-18 所 示 。 


图 3-17 渐变 颜色 面板 图 3-18 【渐变 编辑 器 ] 对 话 框 
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。“【 名 称 】: 在 已 有 的 渐变 样式 中 选择 一 种 渐变 作为 编辑 的 基础 ,在 渐变 效果 预 设 条 中 
调节 任何 一 个 项 目 后,“ 名 称 ” 自 动 变 成 “ 自 定 ”, 用 户 可 以 自 定名 称 。 

“【 渐 变 类 型 3]: 有 实 底 、 杂 色 两 种 ,如 为 实 底 , 则 能 对 平滑 度 、 色 标的 位 置 . 颜 色 \ 不 透 
明度 等 方式 进行 调整 ; 如 为 杂 色 , 则 可 以 设置 渐变 的 粗糙 度 和 颜色 模式 。 

2) 渐变 类 型 

渐变 类 型 包括 线性 渐变 、 径 向 渐变 、 角 度 渐变 、 对 称 渐变 和 萎 形 渐变 5 种 。 使 用 时 单 击 

所 需 渐变 类 型 对 应 的 按钮 ,然后 在 图 像 中 绘制 即 可 。 

。【 线 性 渐变 】: 从 起 点 到 终点 以 直线 渐变 。 

*【 径 向 渐变 〗: 从 起 点 到 终点 以 圆 形 图 案 渐变 。 

。【 和 角度 渐变 】: 围绕 起 点 以 逆 时 针 方向 环绕 渐变 。 

。“【 对 称 渐变 】: 在 起 点 两 侧 产生 对 称 直线 渐变 。 

。【 蔡 形 渐变 〗: 从 起 点 到 终点 以 菱形 图 案 渐变 。 

3) 模式 

【模式 】 选 项 用 来 设置 应 用 渐变 时 的 混合 模式 。 

4) 不 透明 度 

【不 透明 度 ] 选 项 用 来 设置 渐变 效果 的 不 透明 度 。 

5) 反 向 

勾 选 【 反 向 ] 复 选 框 可 转换 渐变 条 中 的 颜色 顺序 ,得 到 反 向 的 渐变 效果 。 

6) 仿 色 

【 仿 色 了 复 选 框 用 来 控制 色彩 的 显示 , 匀 选 它 可 以 使 色彩 的 过 渡 更 平滑 。 

7) 透明 区 域 

勾 选 该 复 选 框 ,可 创建 透明 渐变 ; 取消 勾 选 , 则 只 能 创建 Photoshop CS6 实 色 渐 变 。 


2. 油漆 桶 工具 


在 工具 箱 中 专门 提供 了 一 个 填充 颜色 的 工具 , 即 油 漆 桶 工具 , 它 按照 图 像 中 像素 的 颜色 
进行 填充 色 处 理 , 其 填充 范围 是 与 鼠标 指针 落 点 所 在 像素 点 的 颜色 相同 或 相近 的 像素 点 。 
在 工具 箱 中 选择 油漆 桶 工具 ,其 选项 栏 如 图 3-19 所 示 。 
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图 3-19 ”油漆 桶 工具 选项 栏 


在 工具 箱 中 选择 油漆 桶 工具 ,然后 在 图 像 中 单 击 即 可 填充 前 景色 或 图 案 。 
3.2.3 历史 记录 画笔 工具 和 历史 记录 艺术 画笔 工具 


使 用 历史 记录 画笔 工具 和 历史 记录 艺术 画笔 工具 可 以 在 图 像 中 将 新 绘制 的 部 分 恢复 到 
【历史 记录 了 面板 中 的 “恢复 点 ”处 的 状态 。 


1. 历史 记录 画笔 工具 
历史 记录 画笔 工具 的 功能 有 点 类 似 [ 历 史记 录 ] 面 板 , 也 可 以 撤销 前 面 的 操作 ,其 选项 栏 
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如 图 3-20 所 示 。 


图 3-20 ”历史 记录 画笔 工具 选项 栏 


在 【历史 记录 】 面 板 中 设置 好 恢复 点 的 位 置 , 使 用 工具 在 图 像 中 拖 忠 , 即 可 将 鼠标 拖 过 的 
部 分 恢复 到 恢复 点 的 状态 。 使 用 历史 记录 画笔 工具 恢复 图 像 优 于 【历史 记录 】 面 板 , 可 以 有 
选择 地 擦 除 多余 的 操作 。 用 户 可 以 在 局 部 拖 忠 鼠标 指针 进行 恢复 ,或 在 建立 的 选区 内 进行 
恢复 ,也 可 以 通过 修改 [历史 记录 了 面板 中 恢复 点 的 位 置 将 一 幅 图 像 的 不 同 部 分 恢复 到 不 同 


2. 历史 记录 艺术 画笔 工具 


历史 记录 艺术 画笔 工具 的 使 用 方法 与 历史 记录 画笔 工具 基本 相同 ,只 是 使 用 历史 记录 

艺术 画笔 工具 恢复 图 像 时 ,在 将 图 像 恢复 到 恢复 点 处 效果 的 同时 对 图 像 像素 进行 了 移动 和 
涂抹 ,使 图 像 产生 一 种 被 涂 花 的 效果 ,其 选项 栏 如 图 3-21 所 示 。 

EE ] Pa lien] ] | es [ra] EM rR | ce | 
图 3-21 历史 记录 艺术 画笔 工具 选项 栏 


*【 样 式 ]: 该 下 拉 列 表 中 包含 10 种 移动 和 涂抹 图 像 像 素 的 方式 。 

。*“【 区 域 】: 在 该 文本 框 中 设置 在 多 少 像素 范围 内 进行 移动 和 涂抹 。 

。*“【 容 差 】: 在 该 文本 框 中 设置 当前 图 像 与 恢复 点 图 像 颜 色 之 间 有 多 大 的 差异 ,以便 进 
行 移动 和 涂抹 。 当 【 容 差 了 值 为 0 时 ,可 在 图 像 中 的 任何 地 方 进行 移动 和 涂抹 ; 当 
【 容 差 ] 值 较 大 时 ,只 能 在 与 恢复 点 颜色 明显 不 同 的 区 域 进行 移动 和 涂抹 。 


3.2.4 修复 工具 组 


Photoshop 加 强 了 照片 处 理 功能 。 在 工具 箱 中 专门 用 于 修复 旧 照 片 的 工具 共有 5 个 ， 
即 污 点 修复 画笔 工具 、 修 复 画 笔 工 具 \ 修 补 工具 ,红眼 工具 、 内 容 感 知 移动 工具 。 污 点 修复 夯 
笔 工具 和 修补 工具 主要 用 于 在 保持 原 图 像 明暗 效果 不 变 的 情况 下 消除 图 像 中 的 杂 色 斑点， 
红眼 工具 主要 用 于 处 理 照片 中 出 现 的 红眼 问题 。 


1. 污点 修复 画笔 工具 


使 用 污点 修复 画笔 工具 可 以 快速 移 去 照片 中 的 污点 和 其 他 不 理想 部 分 。 污 点 修复 画笔 
工具 将 自动 从 所 修饰 区 域 的 周围 取样 ,使 用 取样 点 周围 图 像 或 图 案 中 的 样本 像素 进行 绘画 ， 
并 将 样本 像素 的 纹理 ,光照 、 透 明度 和 阴影 与 所 修复 的 像素 相 匹 配 。 污 点 修复 画笔 工具 选项 
栏 如 图 3-22 所 示 ,该 工具 常用 于 对 图 像 中 面积 相对 较 小 的 污点 进行 修复 ,如 果 修 饰 大 片区 
域 或 需要 更 大 程度 地 控制 来 源 取样 , 则 使 用 修复 画笔 工具 的 效果 会 更 好 。 
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3-22 污点 修复 画笔 工具 选项 栏 
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2. 修复 画笔 工具 


修复 画笔 工具 和 污点 修复 画笔 工具 类 似 , 但 是 修复 画笔 工具 使 用 指定 的 图 像 取 样 点 来 
修复 图 像 中 的 缺陷 ,或 复制 预先 设置 好 的 图 案 到 需要 修复 的 位 置 , 且 将 复制 过 来 的 图 像 或 图 
案 边 缘 虚 化 ,并 与 要 修复 的 图 像 按 指定 的 模式 进行 混合 ,混合 的 图 像 不 改变 需要 修复 图 像 的 
明暗 ,从 而 达到 最 佳 的 修复 效果 ,其 选项 栏 如 图 3-23 所 示 。 
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图 3-23 修复 画笔 工具 选项 栏 


【 源 ] 有 两 个 可 选项 ,选择 [取样 3 单 选 按钮 时 是 利用 从 图 像 中 定义 的 图 像 进行 修复 ,选择 
【图 案 了 单 选 按钮 时 是 利用 右 侧 的 [图 案 了 面板 中 的 图 案 对 图 像 进行 修复 。 

在 进行 污 损 照 片 的 处 理 时 ,污点 修复 画笔 工具 主要 用 于 消除 图 像 中 小 范围 内 的 杂 点 , 划 
痕 或 者 污渍 等 ,但 修复 画笔 工具 不 仅 能 用 于 污 损 照片 的 处 理 , 还 可 以 用 于 其 他 方面 。 

用 相同 的 方式 修复 图 像 ,可 以 在 修复 的 过 程 中 多 次 重新 指定 取样 点 。 


3. 修补 工具 


修补 工具 的 功能 与 修复 画笔 工具 相似 ,修补 工具 类 似 一 个 增加 了 选择 功能 的 修复 画笔 
工具 。 在 使 用 修补 工具 修补 图 像 时 , 称 需 要 修补 的 图 像 为 源 图 像 ,把 用 来 修改 源 图 像 的 图 像 
称 为 目标 图 像 。 

修补 工具 可 以 用 来 选取 大 面积 的 图 像 进 行 修复 ,其 选项 栏 如 图 3-24 所 示 。 
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图 3-24 修补 工具 选项 栏 


【新 选区 按钮 【添加 到 选区 ] 按 钮 【从 选区 减 去 ] 按 钮 【与 选区 交叉 按钮 的 功能 与 选 
框 工具 选项 栏 中 按钮 的 功能 相同 。 
*【〖 源 】: 选择 该 单 选 按钮 后 ,可 在 图 像 中 选择 要 修复 的 部 分 ,然后 将 其 拖 忠 至 相似 的 
图 像 处 进行 修复 。 
*【 目 标 】: 选择 该 单 选 按钮 后 ,可 在 图 像 中 选择 与 要 修复 的 图 像 相似 的 部 分 ,然后 将 
其 拖 忠 至 要 修复 的 图 像 处 进行 修复 。 
修补 工具 和 修复 画笔 工具 都 是 用 来 修补 图 像 的 ,修复 画笔 工具 主要 用 于 对 细节 进行 修 
改 , 修 补 工具 主要 用 于 对 较 大 范围 图 像 的 修改 ,如 果 修 补 的 图 像 有 些 过 渡 不 自然 的 地 方 , 可 
以 使 用 修复 画笔 做 进一步 修补 。 


4. 红眼 工具 


红眼 工具 使 用 前 景色 对 图 像 中 特定 的 颜色 进行 蔡 换 。 在 用 于 照片 处 理 时 ,该 工具 常用 
来 校正 图 像 中 较 小 图 像 的 偏 色 , 例 如 在 拍摄 夜间 的 照片 时 ,人 或 动物 的 眼睛 经 常会 因为 反光 
出 现 红色 ,被 称 为 “红眼 ”。 使 用 红眼 工具 可 以 方便 地 消除 红眼 问题 ,也 可 以 移 去 用 闪光 灯 拍 
摄 的 动物 照片 中 的 白色 或 绿色 反光 。 红 眼 工具 不 能 在 颜色 模式 为 “位 图 ”" “索引 ”或 “多 通 
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道 ” 的 图 像 中 使 用 。 
在 工具 箱 中 选择 红眼 工具 后 ,选项 栏 如 图 3-25 所 示 。 


Ee al cm | 


图 3-25 红眼 工具 选项 栏 


*【 瞳 孔 大 小 】: 在 此 文本 框 中 设置 修复 后 瞳孔 (眼睛 暗色 的 中 心 ) 与 眼珠 的 比例 ,数值 
越 大 ,瞳孔 越 大 。 
。*“【 变 暗 量 】: 在 此 文本 框 中 设置 修复 后 瞳孔 的 暗 度 ,数值 越 大 ,瞳孔 越 暗 。 


5. 内 容 感知 移动 工具 


内 容 感知 移动 工具 可 以 简单 到 只 需 选择 图 像 场 景 中 的 某 个 物体 ,然后 将 其 移动 到 图 像 
中 的 任何 位 置 ,经 过 Photoshop 的 计算 ,完成 极其 真实 的 PS 合成 效果 。 
。【 感 知 移动 】〗: 这 个 功能 主要 用 来 移动 图 片 中 的 主体 ,并 随意 放置 到 合适 的 位 置 ,对 
于 移动 后 的 空隙 位 置 ,PS 会 智能 修复 。 
*【 快 速 复制 〗: 选取 想 要 复制 的 部 分 , 移 到 其 他 需要 的 位 置 就 可 以 实现 复制 ,复制 后 
的 边缘 会 自动 进行 柔 化 处 理 ,以 跟 周围 环境 相 融 合 。 
在 工具 箱 的 修复 工具 组 中 选择 内 容 感 知 移动 工具 ,用 户 的 鼠标 指针 上 就 会 出 现 “X” 图 
形 , 按 住 鼠标 左 键 并 拖 动 就 可 以 画 出 选区 ,和 套 索 工具 的 操作 方法 一 样 。 用 户 先 用 这 个 工具 
把 需要 移动 的 部 分 选取 出 来 ,然后 在 选区 中 按 住 鼠 标 左 键 拖 动 , 移 到 想 要 放置 的 位 置 后 松 开 
鼠标 系统 就 会 智能 修复 。 其 选项 栏 如 图 3-26 所 示 。 
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图 3-26 内容 感知 移动 工具 选项 栏 


3.2.5 图 章 工 具 组 


图 章 工具 组 中 包括 仿制 图 章 工具 和 图 案 图 章 工 具 , 它 们 主要 是 通过 在 图 像 中 选择 印 制 
点 或 设置 图 案 对 图 像 进行 复制 。 


1. 仿制 图 章 工具 


使 用 仿制 图 章 工具 可 以 准确 地 复制 图 像 的 一 部 分 或 全 部 。 仿 制图 章 工具 的 操作 与 修复 
画笔 工具 相似 , 按 住 Alt 键 不 放 , 在 图 像 中 要 复制 的 部 分 单 击 , 即 可 取得 这 部 分 作为 样本 ,在 
目标 位 移 处 单 击 或 拖 忠 鼠标 指针 , 即 可 将 取得 的 样本 复制 到 目标 位 徊 。 其 选项 栏 如 图 3-27 
所 示 。 
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3-27 仿制 图 章 工具 选项 栏 


在 进行 不 对 齐 复制 时 ,如 果 想 再 复制 其 他 部 分 的 图 像 , 只 要 按 住 Alt 键 ,在 需要 复制 的 
图 像 上 重新 定义 一 个 起 点 就 可 以 了 。 使 用 仿制 图 章 工具 复制 图 像 可 以 在 一 幅 图 像 中 进行 ， 
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也 可 以 在 多 幅 图 像 之 间 进 行 。 
2. 图 案 图 章 工具 


使 用 图 案 图 章 工具 不 是 复制 图 像 中 的 内 容 , 而 是 复制 已 有 的 图 案 , 其 选项 栏 如 图 3-28 
所 示 。 
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图 3-28 图 案 图 章 工具 选项 栏 


单 击 【 图 案 ] 按 钮 ,或 单 击 【图 案 ] 按 钮 右上 角 的 按钮 ,可 以 利用 弹出 的 下 拉 菜 单 中 的 命令 
设置 5 图案 面板 ,设置 5 图案 3 面板 的 命令 与 设置 [画笔 3 面板 的 命令 相似 。 
。【 对 齐 】: 勾 选 该 复 选 框 ,在 图 像 窗 口中 多 次 拖 忠 鼠标 指针 ,复制 的 图 案 整 齐 排列 ; 若 
不 色 选 该 复 选 框 ,在 图 像 窗口 中 多 次 拖 忠 鼠标 指针 ,复制 的 图 案 将 无 序 地 散落 在 图 
像 窗口 中 。 
。【 印 象 派 效 果 】: 勾 选 该 复 选 框 ,复制 的 图 案 会 产生 扭曲 模糊 的 效果 。 
使 用 图 案 图 章 工具 可 以 将 选 定 的 图 案 复制 到 一 幅 或 多 幅 图 像 中 ,并 且 在 复制 的 过 程 中 
可 以 随时 通过 选项 栏 在 【图 案 了 面板 中 选择 其 他 图 案 。 


3. 自 定义 图 案 

Photoshop 中 提供 的 图 案 并 不 多 ,为 了 方便 用 户 使 用 ,Photoshop 还 专门 提供 了 让 用 户 
自 定义 图 案 的 功能 。 

3.2.6 橡皮 擦 工具 组 


Photoshop 工具 箱 中 提供 了 橡皮 擦 工具 、 背 景 橡皮 擦 工 具 、 魔 术 橡 皮 探 工 具 , 它 们 的 主 
要 功能 是 在 图 像 中 清除 不 需要 的 图 像 像 素 ,以 对 图 像 进 行 修整 。 


1. 橡皮 擦 工具 


橡皮 擦 工具 是 基本 的 探 除 工具 , 它 的 功能 就 像 橡皮 ,在 使 用 橡皮 擦 工具 时 ,如 果 当 前 层 
是 背景 层 ,那么 被 擦 除 的 图 像 位 置 显示 背景 色 , 这 时 可 以 把 橡皮 擦 工具 看 成 是 使 用 背景 色 作 
画 的 绘画 工具 ; 如 果 当 前 层 是 普通 图 层 , 被 擦 除 的 图 像 位 置 显 示 透 明 放 果 。 在 工具 箱 中 选 
择 橡 皮 擦 工具 ,其 选项 栏 如 图 3-29 所 示 。 
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图 3-29 橡皮 擦 工具 选项 栏 


【模式 3 下 拉 列 表 中 共有 3 个 选项 ,橡皮 擦 工具 选项 栏 中 的 其 他 内 容 会 随 [模式 】 选 项 的 
不 同 而 产生 相应 的 变化 。 

当选 择 【画笔 Y 和 【铅笔 ] 选 项 时 ,橡皮 擦 工具 的 选项 和 使 用 方法 与 画笔 工具 、 铅 笔 工 具 相 
似 , 只 不 过 在 背景 层 上 使 用 时 所 用 的 颜色 为 背景 色 ,在 普通 层 上 使 用 时 产生 的 效果 为 透明 。 

当选 择 [ 块 〗 选 项 时 ,橡皮 擦 工具 在 图 像 窗 口中 的 大 小 是 固定 不 变 的 ,所 以 可 以 先 将 图 像 
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放大 到 一 定 倍数 ,然后 再 利用 它 对 图 像 中 的 细微 处 进行 修改 。 当 图 像 被 放大 到 3200% 时 ， 
橡皮 擦 工具 的 大 小 恰好 是 一 个 像素 的 大 小 ,这 时 可 以 对 图 像 进行 精确 到 一 个 像素 的 修改 。 

车 勾 选 【 抹 到 历史 记录 】 复 选 框 ,使 用 橡皮 擦 工具 可 将 图 像 擦 除 至 【历史 记录 面板 中 恢 
复 点 处 的 图 像 效 果 , 这 有 点 类 似 于 历史 记录 画笔 工具 的 功能 。 


2. 背景 橡皮 擦 工具 


使 用 背景 橡皮 擦 工 具 可 以 将 图 像 中 特定 的 颜色 擦 除 。 在 擦 除 时 ,如 果 当 前 层 是 背景 层 ， 
Photoshop 会 自动 将 其 转换 为 普通 层 ,也 就 是 说 ,使 用 背景 橡皮 擦 工具 可 以 将 图 像 擦 除 至 
透明 。 

在 工具 箱 中 选择 背景 橡皮 擦 工具 ,其 选项 栏 如 图 3-30 所 示 。 
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图 3-30 背景 橡皮 擦 工具 选项 栏 


【连续 】: 激活 该 按钮 ,背景 橡皮 擦 工 具 控 除 笔尖 中 心经 过 的 像素 颜色 , 当 笔 尖 中 心经 过 
某 一 像素 时 ,该 像素 的 颜色 被 指定 为 背景 色 。 

【一 次 】: 激活 该 按钮 ,背景 橡皮 擦 工具 擦 除 鼠 标 指针 落 点 处 像素 的 颜色 ,该 落 点 处 像素 
的 颜色 被 设置 为 背景 色 , 只 要 一 直 拖 忠 鼠标 指针 将 一 直 控 除 这 一 颜色 。 

【背景 色 板 】: 激活 该 按钮 ,可 以 在 工具 箱 中 先 将 背景 色 设置 为 需要 擦 除 的 颜色 ,然后 在 
图 像 中 拖 上 中 鼠标 指针 ,只 擦 除 指定 的 背景 色 。 

【限制 】: 该 下 拉 列 表 中 的 选项 决定 了 背景 橡皮 擦 工具 的 作用 范围 。 

。 选择 [不 连续 】 选 项 , 擦 除 笔尖 拖 过 的 范围 内 所 有 与 指定 颜色 相近 的 像素 。 

。 选择 【连续 】 选 项 , 擦 除 笔 尖 拖 过 的 范围 内 所 有 与 指定 颜色 相近 且 相 连 的 像素 。 

。 选择 [查找 边缘 〗 选 项 与 选择 【连续 】 选 项 的 功能 相似 ,只 是 选择 [查找 边缘 〗 选 项 会 在 

图 像 中 保留 较 强 的 边缘 效果 。 

【 容 差 】: 决定 在 图 像 中 选择 要 擦 除 颜色 的 精度 ,此 值 越 大 ,可 擦 除 颜色 的 范围 就 越 大 ; 
此 值 越 小 ,可 擦 除 颜 色 的 范围 就 越 小 。 

【保护 前 景色 】: 勾 选 该 复 选 框 ,图 像 中 使 用 前 景色 的 像素 不 被 擦 除 。 


3. 魔术 橡皮 擦 工具 


魔术 橡皮 擦 工具 与 前 面 介绍 的 两 种 橡皮 擦 工具 在 操作 上 有 所 不 同 , 前 面 的 两 种 橡皮 擦 
工具 通常 是 在 图 像 中 拖 忠 鼠标 指针 .而 使 用 魔术 橡皮 擦 工具 ,只 要 在 图 像 中 需要 擦 除 的 颜色 
上 单 击 , 即 可 在 图 像 中 擦 除 与 鼠标 指针 落 点 处 颜色 相近 的 像素 。 魔 术 橡 皮 擦 工 具 的 选项 使 
用 方法 和 功能 有 些 类 似 魔术 棒 工 具 , 使 用 魔术 橡皮 擦 只 擦 除 图 像 中 颜色 相近 的 像素 ,而 使 用 
魔术 棒 工 具 选 择 图 像 中 颜色 相近 的 像素 。 在 工具 箱 中 选择 魔术 橡皮 擦 工 具 , 其 选项 栏 如 
图 3-31 所 示 。 
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图 3-31 魔术 橡皮 擦 工具 选项 栏 
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3.2.7 模糊 工具 、 锐 化 工具 和 涂抹 工具 


1. 模糊 工具 


模糊 工具 主要 用 于 对 图 像 进 行 柔 化 模糊 。 
在 工具 箱 中 选择 模糊 工具 ,其 选项 栏 如 图 3-32 所 示 。 
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图 3-32 模糊 工具 选项 栏 
选项 栏 上 的 [强度 ] 值 决定 了 每 当 拖 忠 鼠标 指针 时 可 以 使 图 像 达 到 的 模糊 程度 。 
2. 锐 化 工具 
锐 化 工具 主要 用 于 对 图 像 进行 锐 化 。 
3. 涂抹 工具 


在 图 像 中 拖 忠 鼠标 指针 ,可 以 将 鼠标 指针 落 点 处 的 颜色 抹 开 ,其 作用 是 模拟 刚 画 好 一 幅 
画 还 没 干 时 用 手指 去 抹 的 效果 。 


3.2.8 减 淡 工 具 、 加 深 工具 和 海绵 工具 
1. 减 淡 工具 


减 淡 工 具 主 要 用 于 对 图 像 的 阴影 . 半 色 调 及 高 光 等 部 分 进行 提 亮 ,加 光 处 理 。 
在 工具 箱 中 选择 减 淡 工具 ,其 选项 栏 如 图 3-33 所 示 。 


其 本 功能 $ 
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图 3-33 减 淡 工 具 选项 栏 


在 选项 栏 的 范围】 下拉 列表 中 有 3 个 选项 。 

。 选择 [阴影 选项 ,对 图 像 中 较 暗 的 部 分 起 作用 。 

。 选择 [中 间 调 选项 ,平均 地 对 整个 图 像 起 作用 。 

。 选择 [高 光 】 选 项 ,对 图 像 中 较 亮 的 部 分 起 作用 。 

减 淡 工 具 选 项 的 [曝光 度 ] 值 决定 了 一 次 操作 对 图 像 的 提 亮 程度 。 

2. 加 深 工具 

加 深 工具 主要 用 于 对 图 像 的 阴影 、 半 色调 及 高 光 等 部 分 进行 遮光 、 变 暗 处 理 。 

加 深 工 具 的 选项 栏 与 减 淡 工 具 的 基本 相同 ,只 是 它 的 [曝光 度 ] 值 决定 了 一 次 操作 对 图 
像 的 遮光 程度 。 

3. 海绵 工具 

海绵 工具 主要 用 于 对 图 像 进 行 变 灰 或 提纯 (也 就 是 使 图 像 颜色 更 加 鲜艳 ) 处 理 。 
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在 工具 箱 中 选择 海绵 工具 ,其 选项 栏 如 图 3-34 所 示 。 
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图 3-34 海绵 工具 选项 栏 


在 海绵 工具 选项 栏 的 [模式 】 下 拉 列 表 中 有 两 个 选项 。 
。 选择 [降低 饱和 度 】 选 项 ,海绵 工具 降低 图 像 色彩 的 饱和 度 , 对 图 像 进行 变 灰 处 理 。 
。 选择 [饱和 】 选 项 ,海绵 工具 提高 图 像 色彩 的 饱和 度 , 对 图 像 进 行 提纯 处 理 。 
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路 径 和 矢量 工具 


路 径 和 矢量 工具 是 用 来 制作 矢量 图 的 工具 ,钢笔 和 矢量 形状 工具 用 来 绘制 矢量 形状 ,其 
他 路 径 选 择 工具 用 来 对 路 径 进 行 编辑 修改 。 


3.3.1 路 径 的 构成 


路 径 是 由 多 个 锚 点 组 成 的 矢量 线条 , 它 并 不 是 图 像 中 真实 的 像素 ,而 是 一 种 绘图 的 依 
据 。 使 用 Photoshop 提供 的 路 径 创建 及 编辑 工具 可 以 编辑 制作 出 各 种 形状 的 路 径 。 路 径 一 
般 用 于 对 图 案 的 描 边 ,填充 以 及 与 选区 的 转换 等 ,其 精确 度 高 ,便于 调整 ,人 们 常 使 用 路 径 功 
能 来 创建 一 些 特殊 形状 的 图 像 效 果 。 图 3-35 所 示 为 路 径 构成 说 明 图 ,其 中 平滑 点 和 角 点 都 


属于 路 径 的 锚 点 。 
, VY 一 p> 调节 栖 
| 】 
| | 一， 平滑 点 
一 yp 控制 点 
i 路 径 
(点 
图 3-35 路径 构 成 说 明 
。 锚 点 : 路 径 上 有 一 些 矩 形 的 小 点 ,人 们 称 之 为 锚 点 。 锚 点 标记 路 径 上 线段 的 端点 ， 
通过 调整 锚 点 的 位 置 和 形态 可 以 对 路 径 进 行 各 种 变形 调整 。 
。 平滑 点 和 角 点 : 路 径 中 的 锚 点 有 两 种 ,一 种 是 平滑 点 , 另 一 种 是 角 点 ,平滑 点 两 侧 的 


调节 柄 在 一 条 直线 上 ,而 角 点 两 侧 的 调节 柄 不 在 一 条 直线 上 。 直 线 组 成 的 路 径 没有 
调节 柄 ,但 也 属于 角 点 。 

调节 柄 和 控制 点 : 当 平滑 点 被 选择 时 ,其 两 侧 各 有 一 条 调节 柄 ,调节 柄 两 边 的 端点 
为 控制 点 ,移动 控制 点 的 位 置 可 以 调整 平滑 点 两 侧 曲线 的 形态 。 
工作 路 径 和 子路 径 : 路 径 的 全 称 是 工作 路 径 , 一 个 工作 路 径 可 以 由 一 个 或 多 个 子路 
径 构成 。 在 图 像 中 每 一 次 使 用 钢笔 工具 或 自由 钢笔 工具 创建 的 路 径 都 是 一 个 子路 
径 。 在 完成 所 有 子路 径 后 ,可 以 使 用 选项 栏 中 的 选项 将 创建 的 子路 径 组 成 新 的 工作 
路 径 。Photoshop 提供 的 创建 、 编 辑 路 径 的 工具 有 两 组 ,一 组 是 钢笔 工具 ,包括 钢笔 
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工具 、 自 由 钢笔 工具 、 添 加 锚 点 工具 、 删 除 锚 点 工具 和 转换 点 工具 ,这 组 工具 主要 用 
于 对 路 径 进行 创建 和 编辑 ; 另 一 组 是 路 径 选 择 工具 ,包括 路 径 选 择 工具 和 直接 选择 
工具 ,这 组 工具 主要 用 于 对 路 径 和 路 径 上 的 控制 点 进行 选择 ,并 进行 编辑 。 


3.3.2 钢笔 工具 和 自由 钢笔 工具 
1. 钢笔 工具 


钢笔 工具 主要 用 于 在 图 像 中 创建 工作 路 径 或 形状 。 

1) 钢笔 工具 的 基本 操作 

首先 在 工具 箱 中 选择 钢笔 工具 ,创建 路 径 的 基本 操作 有 以 下 几 种 : 

。 选择 钢笔 工具 ,在 图 像 中 移动 鼠标 指针 到 需要 的 位 置 连续 单 击 , 即 可 创建 由 线段 构 
成 的 路 径 。 

在 图 像 中 移动 鼠标 指针 到 需要 的 位 置 单 击 并 拖 忠 ,调整 路 径 形态 到 需要 的 状态 后 释 
放 鼠 标 左 键 , 即 可 创建 锚 点 为 平滑 点 的 曲线 路 径 。 

当 拖 电 出 调节 柄 后 , 按 住 Alt 键 进行 拖 忠 , 即 可 创建 锚 点 为 角 点 的 曲线 路 径 。 

在 创建 了 一 段 路 径 后 ,将 鼠标 指针 移动 到 创建 起 点 , 当 鼠 标 指针 带 句号 形状 时 , 单 击 
即 可 闭合 路 径 。 

2) 钢笔 工具 的 选项 

在 工具 箱 中 选择 钢笔 工具 ,选项 栏 如 图 3-36 所 示 。 


ip 
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图 3-36 ”钢笔 工具 选项 栏 


(1)【 类 型 J 下拉 列表 中 包括 形状 、 路 径 、 像 素 ,每 个 选项 对 应 的 工具 选项 不 同 (选择 矩形 
工具 后 【像素 】 选 项 才 可 用 )。 

。【 形 状 ] 选 项 : 在 图 像 中 可 同时 创建 形状 与 路 径 。 

。【 路 径 】 选 项 : 在 图 像 中 只 创建 新 的 工作 路 径 ,并 将 路 径 保存 到 [路 径 ] 面 板 中 。 

。【 像 素 】 选 项 : 在 使 用 钢笔 工具 时 ,该 选项 处 于 不 可 用 状态 。 钢 笔 工 具 选项 栏 是 与 形 

状 工具 共用 的 ,只 有 在 使 用 形状 工具 时 该 选项 才 可 用 。 

(2)【〖 建 立 ] 中 有 选区 、 蒙 版 .形状 3 个 按钮 ,在 绘制 完 路 径 后 , 单 击 【选区 按钮 会 弹出 
【建立 选区 对 话 框 , 在 其 中 设置 完 参数 , 单 击 【确定 按钮 , 则 将 路 径 转换 为 选区 ; 单 击 【 蒙 
版 3 按钮 则 会 生成 矢量 蒙 版 ; 单 击 【 形 状 ] 按 钮 则 将 绘制 的 路 径 转 换 为 形状 图 层 。 

(3)【 绘 制 模 式 】: 其 用 法 与 选区 相同 ,可 以 实现 路 径 的 相 加 、 相 减 和 相交 等 运算 。 

(4) 【对齐 方式 】: 可 以 设置 路 径 的 对 齐 方式 ( 当 文件 中 有 两 条 以 上 路 径 被 选择 的 情况 
下 可 用 ) ,与 文字 的 对 齐 方式 类 似 。 

(5)【 排 列 顺序 1: 设置 路 径 的 排列 方式 。 

(6)【〖 橡 皮带 】: 可 以 设置 路 径 在 绘制 的 时 候 是 否 连续 。 

(7)【 自 动 添加 /删除 〗: 如 果 勾 选 该 复 选 框 , 当 将 钢笔 工具 移动 到 锚 点 上 时 ,钢笔 工具 
会 自动 转换 为 删除 锚 点 样式 ; 当 移 动 到 路 径 线 上 时 ,钢笔 工具 会 自动 转换 为 添加 锚 点 的 
样式 。 
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(8) 【对齐 边缘 】: 将 矢量 形状 边缘 与 像素 网 格 对 齐 (选择 【形状 选项 时 , 对 齐 边缘 
可 用 ) 。 


2. 自由 钢笔 工具 


使 用 自由 钢笔 工具 可 以 创建 形态 随意 的 不 规则 曲线 路 径 。 它 的 优点 是 操作 较 简便 ; 缺 
点 是 不 够 精确 ,而 且 经 常会 产生 过 多 的 锚 点 。 

1) 自由 钢笔 工具 的 基本 操作 

在 工具 箱 中 选择 自由 钢笔 工具 ,在 图 像 中 拖 忠 鼠标 指针 , 沿 鼠 标 指针 拖 过 的 轨迹 会 自动 
生成 路 径 ; 如 果 将 鼠标 指针 移动 到 起 点 , 当 鼠 标 指针 带 有 句号 形状 时 , 单 击 可 以 闭合 路 径 。 

选择 自由 钢笔 工具 ,在 图 像 中 拖 中 鼠标 指针 ,在 未 闭合 路 径 前 按 住 Ctrl 键 后 松 开 鼠 标 ， 
可 以 直接 在 当前 位 置 到 路 径 起 点 生成 直线 线段 闭合 路 径 。 

2) 自由 钢笔 工具 的 选项 

自由 钢笔 工具 和 钢笔 工具 的 选项 栏 基本 相似 ,如 图 3-37 所 示 , 下 面 只 介绍 与 钢笔 工具 
不 同 的 部 分 。 


:J 过 :| 区. ][ 训 K ][ 到 大 | 十 忆 坊 | 国 口 站 天草 边 达 


图 3-37 自由 钢笔 工具 选项 栏 


【曲线 拟 合 〗: 数值 越 大 (10 像素 为 最 大 ), 锚 点 越 少 ; 数值 越 小 (0. 5 像素 为 最 小 ) , 锚 
“【 宽 度 〗: 可 以 调整 路 径 选择 范围 ,数值 越 大 ,选择 的 范围 越 大 。 

“【 对 比 〗: 对 图 像 边 缘 的 灵敏 度 , 较 大 的 值 只 能 探测 与 周围 强烈 对 比 的 边缘 , 较 小 的 
值 则 探测 低 对 比 度 的 边缘 。 

【频率 】: 值 越 大 ,绘制 路 径 时 产生 的 锚 点 越 多 。 

【钢笔 压力 ]: 在 使 用 绘图 板 输入 图 像 时 ,根据 光 笔 的 压力 改变 “宽度 ” 值 。 


3.3.3 添加 锚 点 工具 和 删除 锚 点 工具 


如 果 没 有 在 钢笔 工具 选项 栏 中 色 选 【自动 添加 /删除 ] 复 选 框 ,那么 可 以 选择 工具 箱 中 的 
添加 锚 点 工具 在 路 径 上 单 击 添加 锚 点 ,之 后 选择 工具 箱 中 的 删除 锚 点 工具 在 锚 点 上 单 击 可 
以 将 其 删除 。 


3.3.4 转换 点 工具 


路 径 上 的 锚 点 有 两 种 类 型 , 即 角 点 和 平滑 点 ,这 两 者 可 以 相互 转换 。 选 择 工 具 箱 中 的 转 
换 点 工具 , 单 击 路 径 上 的 平滑 点 可 以 将 其 转换 为 角 点 , 拖 忠 路 径 上 的 角 点 可 以 将 其 转换 为 平 
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滑 点 。 
3.3.5 路 径 选 择 工 具 和 直接 选择 工具 


1. 路 径 选择 工具 的 选项 与 功能 


使 用 工具 箱 中 的 路 径 选择 工具 可 以 对 路 径 和 子路 径 进行 选择 、 移 动 、 对 齐 和 复制 等 操 
作 。 当 子路 径 上 的 锚 点 全 部 显示 为 黑色 时 ,表示 该 子路 径 被 选择 。 
在 选择 路 径 选择 工具 后 ,其 选项 栏 如 图 3-38 所 示 。 


5 | 时 :本 赔本 [一 jw op 让 | 外 必 鸣 | 部 | 口交 同色 动 避 # 功 能 


图 3-38 路 径 选 择 工具 选项 栏 


【填充 ] 工 描 边 ] 工 描 边 宽度 】 工 描 边 类 型 3: 这 4 个 选项 在 前 面 介 绍 钢笔 工具 时 选择 
【形状 了 后 可 用 。 
W、H: 路 径 的 高 度 和 宽度 ,可 输入 数值 更 改 Photoshop CS6 路 径 的 宽度 和 高 度 。 
对 齐 边缘 : 在 绘制 路 径 时 可 自动 对 齐 网 格 ,选择 Photoshop CS6 菜单 栏 中 的 [窗口 站 
【显示 了 民 网 格 ] 命 令 打开 网 格 ,方便 绘制 路 径 时 使 用 。 
【约束 路 径 拖 动 〗: 它 只 会 针对 用 户 所 选择 的 一 段 路 径 进 行 更 改 , 而 不 会 影响 其 他 段 
路 径 。 

(1) 在 图 像 窗 口中 拖 奥 鼠标 指针 ,鼠标 指针 拖 遇 范围 内 的 子路 径 可 同时 被 选择 。 

(2) 按 住 Shift 键 , 依 次 单 击 子 路 径 , 可 以 选择 多 个 子路 径 。 

(3) 在 图 像 窗口 中 拖 鼻 被 选择 的 子路 径 , 可 以 进行 移动 。 

(4) 按 住 Alt 键 拖 鼻 被 选择 的 子路 径 , 可 以 将 被 选择 的 子路 径 进行 复制 。 

(5) 拖 遇 被 选择 的 子路 径 至 另 一 个 图 像 窗口 中 ,可 以 将 子路 径 复制 到 另 一 个 图 像 文 
件 中 。 

(6) 按 住 Ctrl 键 ,在 图 像 窗 口中 选择 路 径 , 则 路 径 选 择 工具 将 被 转换 为 直接 选择 
工具 。 


2. 直接 选择 工具 的 功能 


直接 选择 工具 没有 选项 栏 ,使 用 直接 选择 工具 可 以 选择 和 移动 路 径 、 锚 点 以 及 平滑 点 两 
侧 的 控制 点 。 使 用 直接 选择 工具 对 路 径 和 锚 点 进行 的 操作 有 以 下 几 种 : 

(1) 单 击 子路 径 上 的 锚 点 可 以 将 其 选择 ,被 选择 的 锚 点 将 显示 为 黑色 。 

(2) 在 子路 径 上 拖 息 鼠标 指针 ,鼠标 指针 拖 电 范围 内 的 锚 点 可 以 同时 被 选择 。 

(3) 按 住 Shift 键 依次 单 击 锚 点 ,可 以 选择 多 个 锚 点 。 

(4) 按 住 Alt 键 单 击 子 路 径 ,可 以 选择 整个 子路 径 。 

(5) 在 图 像 中 拖 遇 两 个 锚 点 间 的 一 段 路 径 可 以 直接 调整 这 一 段 路 径 的 形态 和 位 置 。 

(6) 在 图 像 窗口 中 拖 奥 被 选择 的 锚 点 可 以 移动 该 锚 点 的 位 置 。 

(7) 拖 遇 平滑 点 两 侧 的 控制 点 可 以 改变 其 两 侧 曲线 的 形态 。 

(8) 按 住 Ctrl 键 在 图 像 窗 口中 选择 路 径 , 则 直接 选择 工具 将 被 转换 为 路 径 选 择 工 具 。 
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3.3.6 矢量 图 形 工具 


矢量 图 形 工具 主要 包括 矩形 工具 、 圆 角 和 矩形 ,椭圆 工具 、 多 边 形 工具 、 直 线 工 具 和 自 定形 
状 工具 ,它们 的 使 用 方法 非常 简单 ,在 工具 箱 中 选择 相应 的 形状 工具 后 ,在 图 像 文 件 中 拖 忠 
鼠标 指针 即 可 绘制 出 需要 的 矢量 图 形 。 


1. 形状 工具 的 基本 选项 


在 此 以 矩形 工具 为 例 来 介绍 形状 工具 的 选项 功能 。 
矩形 工具 选项 栏 中 的 内 容 与 钢笔 工具 相似 , 单 击 选项 栏 最 右 侧 的 按钮 ,在 弹出 的 面板 中 
可 以 对 样式 进行 选择 ,如 图 3-39 所 示 。 


“|[%e :jlez: | WE ‖ Rm 多 大 


未 标题 -1 @ 100% (形状 2 RGB/8)* x 


图 3-39 形状 工具 选项 栏 


2. 形状 工具 的 其 他 选项 


每 一 种 形状 工具 除了 具有 它们 共同 的 基本 选项 以 外 ,还 有 一 些 个 性 选项 。 

1) 矩形 工具 选项 

选择 矩形 工具 ,可 以 在 图 像 中 创建 矩形 效果 ,此 时 单 击 选项 栏 中 右 侧 的 按钮 将 弹出 【和 矩 
形 选项 面板 。 

2) 圆 角 矩形 工具 选项 

选择 圆 角 和 矩形 工具 ,可 以 在 图 像 中 创建 圆 角 和 矩形 效果 ,在 圆 角 矩形 工具 选项 栏 中 会 多 出 
一 个 [半径 3 选项 ,用 于 设置 圆 角 半径 。 

3) 椭圆 工具 选项 

选择 椭圆 工具 ,可 以 在 图 像 中 创建 椭圆 效果 ,此 时 单 击 选项 栏 中 右 侧 的 按钮 将 弹出 [ 椭 
圆 选项 ] 面 板 。 

4) 多 边 形 工 具 选 项 

选择 多 边 形 工具 ,选项 栏 中 多 出 一 个 【 边 】 选 项 ,可 以 设置 要 创建 多 边 形 的 边 数 ,此 时 单 
击 选项 栏 右 侧 的 按钮 将 弹出 【多 边 形 选项 ] 面 板 。 

。 匀 选 【平滑 拐角 】 复 选 框 ,创建 的 多 边 形 的 角 将 产生 光滑 圆 角 的 效果 。 
勾 选 【 星 形 】 复 选 框 ,产生 的 不 是 多 边 形 而 是 多 角 星 形 的 效果 。 
勾 挝 【 星 形 】 复 选 框 后 ,可 以 在 【 缩 进 边 依据 ] 文 本 框 中 设置 产生 多 角 星 形 时 边 的 缩 进 
程度 , 勾 选 【平滑 缩 进 ] 复 选 框 , 多 角 星 形 缩 进 的 角 将 产生 平滑 贺 角 效果 。 

5) 直线 工具 选项 

选择 直线 工具 ,可 以 在 图 像 中 创建 直线 和 箭头 效果 .此 时 选项 栏 中 有 一 个 【粗细 选项 ， 
可 以 用 来 设置 线 宽 , 单 击 选项 栏 右 侧 的 按钮 将 弹出 【箭头 了 面板 。 

。 勾 选 [ 起 点 ] 复 选 框 ,在 开始 画 线 时 添加 箭头 效果 。 
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。 勾 选 [终点 ] 复 选 框 ,在 结束 画 线 时 添加 箭头 效果 。 

“【 宽 度 】 值 为 箭头 尾 端的 宽度 与 线 宽 的 百分比 。 

“【 长 度 ] 值 为 箭头 的 长 度 与 线 宽 的 百分比 。 

*【 凹 度 ] 值 表示 箭头 尾 端的 凹陷 程度 。 当 此 值 为 正 时 ,箭头 尾 端 向 内 凹陷 ; 当 此 值 为 

负 时 ,箭头 尾 端 向 外 西 出 ; 当 此 值 为 “0” 时 ,箭头 尾 端 平 齐 。 

6) 自 定形 状 工 具 选 项 

选择 自 定形 状 工具 ,可 以 在 图 像 中 创建 自 定义 的 形状 效果 , 单 击 选项 栏 右 侧 的 按钮 将 弹 
出 【 自 定形 状 选项 面板 。 

在 选项 栏 中 单 击 【 自 定形 状 ] 按 钮 后 ,选项 栏 中 将 多 出 一 个 【形状 按钮 , 单 击 【 形 状 ] 按 
钮 ,可 以 在 弹出 的 【形状 了 面板 中 选择 需要 的 自 定义 形状 效果 。 


3.3.7 【路 径 】 面 板 


前 面 讲 过 路 径 不 是 图 像 中 的 真实 像素 ,而 是 一 种 绘图 的 依据 ,对 路 径 的 描 边 和 填充 是 通 
过 [路径] 面板 进行 的 。 

在 [路径] 面板 中 除了 可 以 描 边 和 填充 路 径 外 ,还 可 以 对 路 径 与 选区 进行 转换 ,对 路 径 进 
行 新 建 、 复 制 及 删除 等 操作 ,这些 功能 大 大 提高 了 制作 路 径 的 灵活 性 。 由 于 使 用 路 径 制 作 图 
像 和 建立 选区 的 精确 度 较 高 且 便于 调整 ,因此 在 图 像 处 理 中 的 应 用 非常 广泛 。 


1.【 路 径 ] 面 板 的 基本 操作 


当前 文件 中 的 工作 路 径 堆 琶 在 【路 径 了 面板 上 方 , 其 中 左 侧 为 路 径 的 缩 略图 ,显示 路 径 的 
缩 览 效果 , 右 侧 为 路 径 的 名 称 。 
。 在 [路径 3 面板 中 直接 拖 忠 路 径 至 相应 的 位 置 就 可 以 移动 该 路 径 的 堆 秋 位置。 
。 在 [路径 3 面板 中 单 击 相 应 的 路 径 就 可 以 将 路 径 打 开 , 使 其 在 图 像 窗 口中 显示 ,以 便 
于 进行 各 种 操作 。 
。 单 击 【 路 径 ] 面 板 堆 从 下 方 的 空白 处 ,可 以 隐藏 路 径 , 使 其 不 在 图 像 窗口 中 显示 。 
。 双击 路 径 的 名 称 可 以 对 其 重新 命名 ,在 修改 的 同时 就 将 该 路 径 保存 。 


2.【 路 径 】 面 板 菜单 


单 击 【路 径 】 面 板 右上 角 的 【5 扩展] 按钮 ,将 弹出 图 3-40 所 示 的 面板 菜单 。 

1)【 新 建 路 径 ] 和 [存储 路 径 ] 命 令 

如 果 当 前 选择 的 是 已 保存 的 路 径 ,那么 [路 径 】 
面板 菜单 中 显示 【新 建 路 径 】 命 令 。 选 择 【 新 建 路 
径 】 命 令 , 在 弹出 的 对 话 框 的 [名 称 】 文 本 框 中 设置 
新 路 径 的 名 称 ,此 时 新 创建 的 路 径 自动 保存 。 

如 果 当 前 选择 的 是 未 保存 的 路 径 ,那么 [路 径 】 
面板 菜单 中 [新 建 路 径 ] 命 令 的 位 置 处 显示 的 则 是 
【存储 路 径 ] 命 令 。 选 择 [ 存 储 路 径 ] 命 令 , 在 弹出 的 
对 话 框 的 [名 称 ] 文 本 框 中 设置 要 存储 路 径 的 名 称 ， 图 3-40 【路 径 ] 面 板 及 面板 菜单 
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单 击 【确定 了 按钮 将 当前 工作 路 径 保存 。 

2) 【复制 路 径 ] 命 令 

只 有 当 【 路 径 ] 面 板 中 选择 的 是 已 保存 的 路 径 时 ,【 复 制 路 径 ] 命 令 才 可 用 。 选 择 【 复 制 路 
径 ] 命 令 , 在 弹出 的 对 话 框 的 [名 称 ] 文 本 框 中 设置 新 复制 路 径 的 名 称 , 单 击 【确定 按钮 可 以 
将 当前 路 径 复制 。 

3)【 删 除 路 径 ] 命 令 

选择 [删除 路 径 ] 命 令 , 可 以 将 当前 被 选择 的 路 径 删 除 。 

4)【 建 立 工作 路 径 ] 命 令 

只 有 当 图 像 中 存在 选区 时 ,【 建 立 工作 路 径 ] 命 令 才 可 用 。 选 择 该 命令 ,在 弹出 的 对 话 框 
中 设置 容 差 的 值 , 单 击 【确定 ] 按 钮 。 其 中 [ 容 差 3 值 用 来 设置 将 选区 转换 为 路 径 的 精确 程度 。 

5)【 建 立 选 区 命令 

在 图 像 中 选择 路 径 并 选择 [建立 选区 命令 ,弹出 [建立 选区 ] 对 话 框 ,在 对 话 框 中 进行 设置 。 

6)【 填 充 路 径 ] 命 令 

选择 要 进行 填充 的 路 径 , 并 选择 【填充 路 径 ] 命 令 。 

7)【 描 边 路 径 ] 命 令 

选择 要 进行 描 边 的 路 径 , 然 后 选择 [ 描 边 路 径 ] 命 令 ,在 弹出 的 对 话 框 的 [工具 下拉 列表 
中 选择 描 边 所 要 使 用 的 工具 。 

8)【 剪 贴 路 径 ] 命 令 

【剪贴 路 径 的 主要 功能 是 在 图 像 进行 打印 和 输出 到 Illustrator 或 InDesign 中 时 设置 
图 像 的 透明 区 域 ,这 一 功能 在 Photoshop 中 不 起 作用 ,所 以 读者 只 要 大 概 了 解 就 可 以 了 。 注 
意 要 作为 剪贴 路 径 的 路 径 必须 是 已 经 保存 的 路 径 。 

9)【 面 板 选 项 命令 

选择 该 命令 ,可 以 在 弹出 的 【路 径 面 板 选 项 ] 对 话 框 中 设置 缩 略 图 的 大 小 。 


3. 创建 新 路 径 和 创建 子路 径 


在 图 像 中 新 创建 的 路 径 实际 上 是 一 个 未 保存 的 工作 路 径 ,一 个 工作 路 径 可 以 由 一 个 子 
路 径 组 成 ,也 可 以 由 多 个 子路 径 组 成 ,那么 在 使 用 钢笔 工具 创建 路 径 时 所 创建 的 到 底 是 一 个 
什么 样 的 工作 路 径 呢 ? 

1) 当 图 像 中 只 存在 一 个 未 保存 的 路 径 时 

。 如 果 该 路 径 处 于 隐藏 状态 ,那么 在 图 像 中 使 用 钢笔 工具 创建 一 个 新 路 径 并 将 原 有 的 
路 径 删 除 。 
。 如 果 该 路 径 不 处 于 隐藏 状态 ,此 时 在 图 像 中 使 用 钢笔 工具 创建 一 个 新 路 径 相 当 于 继 
续 编辑 当前 的 工作 路 径 , 也 就 是 说 相当 于 创建 子路 径 。 
2) 当 图 像 中 存在 一 个 已 保存 的 路 径 时 
。 如 果 该 路 径 处 于 隐藏 状态 ,那么 在 图 像 中 使 用 钢笔 工具 创建 一 个 新 路 径 会 创建 一 个 
新 的 工作 路 径 , 但 原 路 径 依 然 存在 。 
。 如 果 该 路 径 不 处 于 隐藏 状态 ,此 时 在 图 像 中 使 用 钢笔 工具 创建 一 个 新 路 径 相当 于 继 

续 编辑 当前 的 工作 路 径 , 也 就 是 说 相当 于 创建 子路 径 。 
男 外 ,可 以 直接 在 【路径 3 面板 中 创建 新 的 子路 径 。 
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@.4 文字 工具 


Photoshop CS6 中 提供 的 文字 功能 非常 强大 ,用 户 可 以 直接 在 图 像 中 输入 、 编 辑 和 修改 
文字 ,并 对 文字 进行 对 齐 、 排 列 .间距 调整 缩放、 颜色 调整 .拼写 检查 、 文 本 查找 及 替换 等 操 
作 , 还 可 以 对 文字 进行 各 种 特殊 变形 ,使 文字 产生 奇异 的 形态 效果 。 


3.4.1 创建 文字 图 像 和 选区 
1. 创建 点 文字 


在 Photoshop 中 ,文字 的 创建 和 编辑 与 其 他 图 像 的 创建 和 编辑 相 比 步骤 有 所 不 同 。 在 
使 用 工具 箱 中 的 大 多 数 工 具 时 ,必须 先 设置 好 工具 的 选项 ,然后 创建 相应 的 图 像 , 而 使 用 文 
字 工 具 创 建文 字 时 ,可 以 在 创建 文字 前 设置 格式 ,也 可 以 在 完成 创建 后 重新 设置 文字 格式 。 

在 Photoshop 中 可 以 直接 沿 直线 创建 文字 ,也 可 以 沿 指定 的 路 径 创建 文字 ,使 用 这 两 种 
方法 创建 的 文字 称 为 点 文字 。 

1) 直接 沿 直 线 创建 文字 

选择 工具 箱 中 的 横 排 文字 工具 或 坚 排 文字 工具 ,在 图 像 窗口 中 单 击 , 即 可 从 鼠标 单 击 的 
位 置 开 始 输入 文字 。 文 字 的 输入 、 编 辑 和 修改 方法 与 Word、WPS 等 软件 中 的 文字 编辑 方法 
一 样 ,文字 使 用 的 格式 为 输入 前 选项 栏 中 设 定 的 格式 。 如 果 要 对 文字 格式 进行 修改 ,必须 先 
选中 要 修改 的 文字 ,然后 在 选项 栏 中 进行 修改 。 

2) 沿 指定 的 路 径 创 建文 字 

在 Photoshop 中 沿路 径 创建 文字 的 基本 步骤 如 下 : 

(1) 在 图 像 中 创建 路 径 。 

(2) 选择 工具 箱 中 的 文字 工具 ,将 鼠标 指针 移动 到 路 径 上 , 当 鼠 标 指针 带 “ 一 "形状 时 单 
击 , 从 鼠标 指针 落 点 处 开始 输入 文字 ,在 文字 开始 的 位 置 会 出 现 一 个 “O”。 


2. 创建 文字 选区 


选择 工具 箱 中 的 文字 蒙 版 工具 ,在 图 像 窗 口中 单 击 , 图 像 暂 时 转换 为 快速 蒙 版 模式 ,此 
时 在 图 像 中 输入 文字 ,实际 上 是 在 编辑 快速 蒙 版 。 文 字 编 辑 完成 后 , 单 击 选 项 栏 中 的 [确认 】 
按钮 ,图 像 将 回 到 标准 编辑 模式 , 刚 编辑 的 文字 将 会 转 为 选区 。 

在 使 用 文字 蒙 版 工具 建立 选区 后 ,无 法 再 对 文字 进行 编辑 ,所 以 在 回 到 标准 编辑 模式 前 
一 定 要 确认 需要 的 选区 效果 已 经 完成 。 


3.4.2 创建 段落 文字 


段落 文字 就 是 创建 在 文字 定 界 框 内 的 文字 ,文字 定 界 框 的 作用 是 通过 文字 工具 在 图 像 
中 划 出 一 个 矩形 范围 ,在 该 范围 内 创建 文字 和 文字 段落 ,使 用 文字 定 界 框 可 以 限定 图 像 中 文 
字 出 现 的 范围 和 位 置 。 
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1. 利用 任意 大 小 的 文字 定 界 框 创建 段落 


选择 工具 箱 中 的 文字 工具 ,在 图 像 中 拖 中 鼠标 指针 ,图 像 中 将 会 生成 一 个 文字 定 界 框 ， 
随后 输入 的 文字 将 在 定 界 框 内 自动 换行 显示 。 
如 果 输 入 的 文字 过 多 ,超出 定 界 框 范围 的 文字 会 被 隐藏 。 


2. 利用 自 定 大 小 的 文字 定 界 框 创建 段落 


按 住 Alt 键 ,在 图 像 中 拖 忠 鼠标 指针 ,在 弹出 的 [段落 文字 大 小 3 对 话 框 中 可 以 设置 文字 
定 界 框 的 大 小 。 


3. 调整 文字 定 界 框 


。 按 住 Ctrl 建 ,可 以 移动 文字 定 界 框 和 【[ 定 界 框 中 心 ] 标 志 * 介 ”的 位 置 。 

按 住 Ctrl 键 ,用 鼠标 拖 忠 文字 定 界 框 的 边线 可 以 对 定 界 框 进行 斜 切 变 形 。 

将 鼠标 指针 移 至 文字 定 界 框 的 边线 外 侧 , 当 鼠标 指针 显示 为 《时 拖 中 ,以 “十” 
( 定 界 框 中 心 ) 标 志 为 轴 旋 转 定 界 框 。 

将 鼠标 指针 移 至 文字 定 界 框 的 节点 上 , 当 鼠 标 指 针 显示 为 双 箭头 时 拖 忠 ,可 以 调整 
文字 定 界 框 的 宽度 和 高 度 。 

在 定 界 框 内 的 文字 显示 随 定 界 框 形态 的 改变 自动 调整 。 


3.4.3 设置 文字 属性 


在 Photoshop 的 工具 箱 中 可 以 选择 不 同 的 文字 工具 ,这 一 步 操作 一 定 要 在 创建 文字 前 
进行 。 


1. 文字 属性 
在 工具 箱 中 选择 文字 工具 ,其 选项 栏 如 图 3-41 所 示 。 


ET- sl -J ls -J] [wn :| 圈 枯 和 || | 加 | E 


图 3-41 文字 工具 选项 栏 


1) 转换 文字 方向 

单 击 [ 文 字 转 换 了 按钮 ,可 以 将 水 平 文字 转换 为 垂直 文字 ,或 将 垂直 文字 转换 为 水 平 文字 。 
2) 设置 文字 的 字符 格式 

在 文字 工具 选项 栏 中 可 以 直接 设置 字符 格式 。 

。【 字 体 】: 设置 文字 所 要 使 用 的 字体 。 

。【 字 形 】: 设置 文字 的 倾斜 .加 粗 等 形态 。 

。【 字 体 大 小 】: 设置 文字 的 大 小 。 

。【 锯 齿 〗: 选择 文字 边缘 的 平滑 方式 。 

3) 设置 文字 的 对 齐 方式 

。 在 选项 栏 中 选择 横 排 文字 工具 .【 对 齐 ] 按 钮 显示 为 使 水 平 文 字 [ 向 左 对 齐 】【 沿 水 平 
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中 心 对 齐 ] 和 【向 右 对 齐 】。 

。 在 选项 栏 中 选择 竖 排 文字 工具 屎 对齐】 按钮 显示 为 使 垂直 文字 [向 上 对 齐 】〗 沿 垂直 
中 心 对 齐 了 和 【向 下 对 齐 】. 

4) 设置 文字 颜色 

单 击 【 文 本 颜色 了 色 块 可 以 修改 被 选中 文字 的 颜色 。 

5) 设置 文字 变形 

在 图 像 中 创建 了 文字 后 , 单 击 选项 栏 中 的 【创建 文字 变形 了 按钮 ,在 弹出 的 [变形 文字 对 

话 框 中 单 击 【样式 下 拉 列 表 , 可 以 对 文字 进行 变形 。 


2.【 字 符 面 板 


在 工具 箱 中 选择 文字 工具 , 单 击 选 项 栏 中 的 【显示 /隐藏 字符 和 段落 面板 ] 按 钮 ,在 弹出 


的 面板 组 中 选择 [字符 】 ,如 图 3-42 所 示 。 

【字符 面板 中 包括 字体 、 字 体 大 小 、 垂 直 缩 放 、 所 选 字符 的 比例 间距 ,基线 偏 移 等 设置 ; 
【颜色 了 色 块 下 方 有 一 排 按钮 用 来 设置 文字 字符 的 效果 , 当 在 文字 图 层 中 选中 要 设置 的 文字 
时 ,分 别 单 击 这 些 按钮 ,可 以 完成 相应 的 设置 。 


3.【 段 落 了 面板 


在 工具 箱 中 选择 文字 工具 , 单 击 选项 栏 中 的 【显示 /隐藏 字符 和 段落 面板 按钮 ,在 弹出 
的 面板 组 中 选择 【段落 了 ,如 图 3-43 所 示 。 


JE 严格 $ 
间 耻 姐 合 设置: | 间距 姐 合 2 。 。 


[a 


图 3-42 【字符 面板 图 3-43 【段落 面板 


【段落 了 面板 主要 用 于 设置 文字 段落 的 格式 ,其 中 包括 对 齐 方式 、 缩 进 方式 段 前 添加 空 
格 、 段 后 添加 空格 等 。 


人 其 他 工具 


这 些 工具 包括 裁剪 、 切 片 等 辅助 工具 ,它们 是 对 图 像 进行 修改 大 小 、 制 作 切 片 及 在 编辑 
修改 过 程 中 进行 帮助 的 工具 。 
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5.1 裁剪 工具 
裁剪 工具 


裁剪 工具 主要 用 来 将 图 像 中 多 余 的 部 分 剪 切 掉 , 只 保留 需要 的 部 分 ; 在 裁剪 的 同时 还 
可 以 对 图 像 进行 旋转 、 扭 曲 等 变形 修改 ,并 可 直接 设置 裁剪 后 图 像 的 像素 和 分 辨 率 。 
在 工具 箱 中 选择 裁剪 工具 后 ,选项 栏 如 图 3-44 所 示 。 
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图 3-44 裁剪 工具 选项 栏 


单 击 工具 选项 栏 左边 的 下 拉 按 钮 ,可 以 打开 工具 预 设 选取 器 ,在 预 设 选 取 器 里 可 以 
选择 预 设 的 参数 对 图 像 进行 裁剪 。 

【裁剪 比例 】: 单 击 该 按钮 可 以 显示 当前 的 裁剪 比例 或 设置 新 的 裁剪 比例 。 如 果 图 
像 中 有 选区 , 则 按钮 显示 为 选区 。 

【裁剪 输入 框 】: 可 以 自由 设置 裁剪 的 长 宽 比 。 

【纵向 与 横向 旋转 裁剪 框 】: 设置 裁剪 框 为 纵向 裁剪 或 横向 裁剪 。 

【 拉 直 】: 可 以 校正 倾斜 的 照片 。 

【视图 】: 可 以 设置 Photoshop CS6 裁剪 框 的 视图 形式 。 

其 他 裁剪 选项 : 可 以 设置 裁剪 的 显示 区 域 ,以 及 裁剪 屏蔽 的 颜色 .不 透明 度 等 。 
【删除 裁剪 的 像素 〗: 勾 选 该 复 选 框 后 ,裁剪 完毕 的 图 像 将 不 可 更 改 ; 若 不 勾 选 该 复 
选 框 ,即使 裁剪 完毕 ,选择 裁剪 工具 单 击 图 像 区域 仍 可 显示 裁剪 前 的 状态 ,并 且 可 以 
重新 调整 裁剪 框 。 


透视 裁剪 工具 


透视 裁剪 工具 是 Photoshop CS6 新 增 的 工具 ,该 工具 可 以 在 裁剪 的 同时 方便 地 校正 图 
像 的 透视 错误 , 即 对 倾斜 的 图 片 进行 校正 ,其 选项 栏 如 图 3-45 所 示 。 
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3-45 ”透视 裁剪 工具 选项 栏 


参数 输入 框 : 在 框 中 可 以 输入 需要 裁剪 的 尺寸 。 

单位 : 单 击 该 按钮 可 以 设置 裁剪 后 图 像 的 单位 。 

【前 面 的 图 像 】: 单 击 该 按钮 可 以 使 裁剪 后 的 图 像 与 之 前 打开 的 图 像 大 小 相同 。 
【清除 】: 单 击 该 按钮 可 以 清除 输入 框 中 的 数值 。 

【显示 网 格 】: 若 勾 选 【显示 网 格 ] 复 选 框 ,可 显示 裁剪 框 的 网 格 ; 若 不 勾 选 , 则 仅 显示 
外 框 线 。 


切片 工具 


Photoshop 加 强 了 对 网 络 的 支持 ,切片 工具 和 切片 选择 工具 就 是 特别 针对 网 络 应 用 开 
发 的 ,使 用 它们 可 以 将 较 大 的 图 像 切割 为 几 个 小 图 像 ,便于 在 网 上 发 布 ,提高 网 页 打开 的 
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速度 。 

1) 创建 切片 

创建 切片 的 方式 通常 有 两 种 ,一 种 是 根据 参考 线 切片 ,这 种 切片 方式 比较 精确 ; 另 一 种 
是 利用 切片 工具 直接 在 图 像 中 拖 忠 鼠标 指针 切片 ,这 种 方式 比较 灵活 ,但 切片 的 位 置 和 排列 
不 够 精确 。 

2) 切片 工具 选项 栏 

选择 工具 箱 中 的 切片 工具 ,选项 栏 如 图 3-46 所 示 。 


| [IE <:] 计谋 :[ ”| 高度 | 。。。， ] [至于 枚 考 屿 0 切 汪 到 村 功能 。 


图 3-46 切片 工具 选项 栏 


“【 样 式 】 下 拉 列 表 中 有 3 个 选项 ,选择 不 同 的 选项 可 以 在 图 像 中 建立 大 小 与 比例 不 同 
的 切片 。 

。【 基 于 参考 线 的 切片 ] 按 钮 只 有 在 图 像 窗 口中 设置 了 参考 线 时 才 可 使 用 , 单 击 该 按钮 
可 以 根据 当前 图 像 中 的 参考 线 创建 切片 。 


4. 切片 选择 工具 


切片 选择 工具 主要 用 于 对 切片 进行 各 种 设置 ,例如 切片 的 堆 番 、 选 项 设置 激活 ,分 割 、 
显示 或 隐藏 等 。 切 片 选择 工具 选项 栏 如 图 3-47 所 示 。 
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图 3-47 切片 选择 工具 选项 栏 


1) 显示 /隐藏 切片 

在 创建 切片 的 时 候 , 如 果 从 图 像 的 左上 和 角 开 始 创建 切片 ,切片 左上 角 默 认 的 编号 显示 
“01”; 如 果 从 其 他 位 置 开 始 创建 , 则 新 创建 切片 的 编号 可 能 是 “02”( 从 沿 一 边 中 间 位 置 开 始 
创建 切片 ) 或 “03”( 从 图 像 的 中 间 位 置 开始 创建 切片 ), 这 是 因为 当 不 是 从 左上 角 开 始 创建 切 
片 时 ,系统 根据 创建 切片 的 边线 将 图 像 的 其 他 部 分 自动 分 割 , 变 成 了 一 些 自动 切片 ,切片 的 
默认 编号 是 从 左上 角 开 始 的 ,系统 将 会 对 所 有 切片 (包括 隐藏 切片 ) 进 行 编 号 。 

当 在 图 像 中 创建 切片 时 ,只 有 拖 忠 鼠标 指针 生成 的 切片 是 被 激活 的 ,其 他 自动 产生 的 切 
片 都 是 自动 切片 ,自动 切片 默认 是 隐藏 的 。 单 击 【显示 自动 切片 3 按钮 , 即 可 将 自动 切片 显示 
出 来 ,此 时 【显示 自动 切片 3 按钮 将 显示 为 【隐藏 自动 切片 3 按钮 ,自动 切片 的 边线 显示 为 虚 
线 ,此 时 再 单 击 选项 栏 中 的 【隐藏 自动 切片 3 按钮 , 即 可 将 自动 切片 再 次 隐藏 起 来 。 

2) 调整 切片 的 大 小 

选择 切片 选择 工具 ,将 鼠标 指针 移动 到 当前 切片 的 边线 或 四 和 角 上 , 当 鼠 标 指针 显示 为 双 箭 
头 时 拖 忠 ,可 以 通过 移动 切片 边线 的 位 置 来 调整 切片 的 大 小 , 按 Delete 键 可 以 删除 当前 切片 。 

3) 激活 切片 

当 自动 切片 左上 角 的 编号 显示 为 灰色 时 ,表示 该 切片 没有 被 激活 ,此 时 切片 的 部 分 功能 
不 能 使 用 。 如 果 要 使 这 些 切片 功能 可 以 使 用 ,只 要 在 图 像 窗口 中 单 击 要 激活 的 切片 将 其 选 
择 ,再 单 击 选项 栏 中 的 【提升 3 按钮 就 可 以 将 其 激活 ,此 时 切片 左上 角 的 编号 显示 为 蓝 色 。 系 
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统 默认 被 选择 切片 的 边线 显示 为 橙色 ,其 他 切片 的 边线 显示 为 蓝 色 。 

4) 设置 切片 的 堆 芭 顺序 

切片 像 图 层 一 样 ,每 个 切片 之 间 有 一 定 的 堆 释 顺序 ,选项 栏 左 侧 的 4 个 按钮 就 是 用 来 设 
置 切片 堆 秋 顺序 的 。 在 图 像 中 选择 要 设置 堆 释 顺序 的 切片 ,可 以 分 别 单 击 上 述 按钮 完成 相 
应 操作 。 

5) 平均 分 割 切片 

用 户 可 以 将 现 有 的 切片 进行 平均 分 割 。 选 择 
切片 选择 工具 后 ,在 图 像 窗 口中 选择 一 个 切片 , 单 
击 选 项 栏 中 的 【划分 按钮 ,将 弹出 【划分 切片 对 
话 框 , 如 图 3-48 所 示 。 

(1) 勾 选 【水平 划分 为 ] 复 选 框 ,可 以 通过 添加 
水 平分 割 线 将 当前 切片 在 高 度 上 进行 分 割 。 

(2) 勾 选 [垂直 划分 为 3 复 选 框 ,可 以 通过 添加 
垂直 分 割 线 将 当前 切片 在 宽度 上 进行 分 割 。 图 3-48 【划分 切片 ] 对 话 框 

6) 将 切片 的 图 像 保 存 为 网 页 

在 Photoshop 中 处 理 图 像 切片 .最 终 目 的 是 在 网 上 发 布 ,因此 要 把 它们 保存 为 网 页 的 格 
式 。Photoshop 提供 了 最 佳 的 处 理 网 页 图 像 文件 的 工具 和 办 法 ,选择 菜单 栏 中 的 [文件 3 
【存储 为 Web 所 用 格式 了 命令 ,在 弹出 的 【存储 为 Web 所 用 格式 对 话 框 中 进行 设置 , 单 击 
【存储 按钮 ,将 弹出 [将 优化 结果 存储 为 ] 对 话 框 ,在 对 各 选项 进行 相应 设置 后 单 击 【 保 存 ] 按 
钮 , 即 可 进行 保存 。 


3.5.2 辅助 工具 
1. 了 吸管 工具 


预览 (w) 


吸管 工具 用 于 快速 、 准 确 地 取样 颜色 。 使 用 吸管 工具 可 以 从 图 像 中 吸取 某 一 点 的 颜色 ， 
或 者 以 拾取 点 周围 的 平均 色 进 行 颜色 取样 ,从 而 改变 前 景色 ,其 选项 栏 如 图 3-49 所 示 。 


有 -| 取样 大 小: [ 取 习 点 3 样本 | 所 有 图 层 


图 3-49 吸管 工具 选项 栏 


。【 取 样 大 小 】: 单 击 选项 栏 中 的 【取样 大 小 3 选项 的 下 三 角 按 钮 ,可 弹出 下 拉 菜 单 , 在 
其 中 可 选择 要 在 怎样 的 范围 内 吸取 颜色 。 
。【 样 本 】: 对 选取 的 颜色 在 哪个 层 进行 设 置 。 
。*【 显 示 取 样 环 】: 勾 选 【显示 取样 环 ] 复 选 框 , 则 在 Photoshop CS6 图 像 中 单 击 取样 点 
时 出 现 取 样 环 。 
在 图 像 中 要 吸取 的 颜色 上 单 击 ,工具 箱 中 的 [前 景色 ] 色 块 将 被 修改 为 吸管 工具 吸取 的 
颜色 ; 按 住 Alt 键 不 放 单 击 ,使 用 吸管 工具 吸取 的 颜色 将 被 用 作 背 景色 。 


2. 颜色 取样 器 工具 
颜色 取样 器 工具 的 主要 功能 是 检测 图 像 中 像素 的 色彩 构成 。 在 图 像 中 单 击 ,鼠标 指针 
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落 点 处 会 出 现 一 个 色彩 样 例 的 图 标 , 称 为 取样 点 。 在 同一 个 国 癌 
图 像 中 最 多 可 以 放置 4 个 取样 点 ,每 个 取样 点 处 像素 的 色彩 
构成 都 显示 在 【信息 了 面板 中 。 

选择 颜色 取样 器 工具 ,并 打开 一 幅 图 像 ,在 图 像 中 单 击 
4 次 ,每 单 击 一 次 ,在 图 像 中 便 会 出 现 一 个 取样 点 图 标 ,其 右 
下 角 分 别 标注 有 “1”、“2”“3”“4”, 表示 它 们 分 别 是 “#1”、 
“#2”、“#3”“#4” 取 样 点 ,此 时 [信息 ] 面 板 下 方 显示 每 个 取 
样 点 的 色彩 构成 。 【信息 3 面板 如 图 3-50 所 示 。 

将 鼠标 指针 移动 至 取样 点 的 位 置 , 当 鼠 标 指针 变 成 箭头 
形状 时 拖 电 ,可 以 调整 取样 点 的 位 置 。 按 住 Alt 键 不 放 ,移动 
鼠标 指针 至 取样 点 的 位 置 , 当 鼠 标 指 针 变 成 剪刀 的 形状 时 单 
击 , 可 以 删除 该 取样 点 。 图 3-51 所 示 为 颜色 取样 器 工具 选 


项 栏 。 图 3-50 【信息 了 面板 


图 3-51 颜色 取样 器 工具 选项 栏 


3. 标尺 工具 


标尺 工具 的 主要 功能 是 对 某 部 分 图 像 的 长 度 或 角度 进行 精确 的 测量 ,测量 的 数据 显示 
在 标尺 工具 选项 栏 和 [信息 了 面板 中 。 
选择 工具 箱 中 的 标尺 工具 ,然后 在 图 像 上 需要 测量 的 起 点 按 住 鼠标 左 键 并 向 终点 拖 动 ,到 
达 终 点 后 松 开 鼠 标 , 即 可 完成 这 两 点 之 间 的 距离 测量 。 标 尺 工具 选项 栏 如 图 3-52 所 示 。 
区 na | | WR D 
图 3-52 标尺 工具 选项 栏 


其 中 分 别 是 起 点 坐标 、 宽 度 、 高 度 、 角 度 和 距离 。 
4. 附注 工具 


附注 工具 是 在 图 片 中 添加 注释 的 工具 。 其 使 用 起 来 比较 简单 ,选择 这 款 工 具 后 在 需要 
添加 注释 的 地 方 单 击 一 下 就 会 有 一 个 对 话 框 出 现 , 在 里 面 输入 想 要 的 文字 即 可 ,关闭 对 话 框 
就 可 以 保存 。 用 户 可 以 在 选项 栏 中 输入 其 他 信息 ,也 可 以 在 注释 上 右 击 选择 [删除 ] 等 命令 。 
这 款 工具 可 以 多 次 使 用 ,注释 完成 后 ,保存 为 . psd 格式 的 文件 就 可 以 把 注释 保存 。 选 择 附 
注 工具 后 的 选项 栏 如 图 3-53 所 示 。 


图 3-53 附注 工具 选项 栏 


“【 作 者 】 文 本 框 : 添加 作者 名 称 , 它 会 显示 在 【文本 附注 了 框 的 标题 栏 中 。 
“ 【颜色 了 色 块 : 显示 图 像 中 的 附注 图 标 所 使 用 的 颜色 , 单 击 该 色 块 ,可 以 在 弹出 的 对 
话 框 中 对 此 颜色 进行 调整 。 
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。【 清 除 全 部 ] 按 钮 : 可 以 将 图 像 中 所 有 的 文本 附注 删除 。 
。【 显 示 / 隐 藏 注释 面板 ] 按 钮 : 用 来 显示 /隐藏 注释 面板 。 
当 在 图 像 中 添加 了 文本 附注 或 语音 附注 后 ,如 果 要 在 保存 图 像 时 就 将 这 些 附 注 保 存 , 则 只 
能 将 文件 保存 为 . psd、. pdf 或 .tif 格式 ,并 且 保 存 时 要 在 [存储 为 ] 对 话 框 中 色 选 [附注 ] 复 选 框 。 


5. 计数 工具 
计数 工具 可 用 来 统计 图 像 中 对 象 的 个 数 ,并 将 数目 显示 在 选项 栏 中 ,其 选项 栏 如 
图 3-54 所 示 。 
1 23-|i:。 |[i¥s  :]®@m [A% |] ek:E 村 符 大 小 : [2 EZ 


3-54 计数 工具 选项 栏 


. 


【显示 计数 的 总 个 数 】: 对 象 的 个 数 。 

【计数 组 】: 显示 计数 组 的 名 字 及 重新 命名 。 
【切换 计数 组 的 可 见 性 】: 设置 计数 组 的 可 见 性 。 
【创建 新 的 计数 组 】: 创建 新 的 计数 组 。 

【删除 计数 组 】: 将 当前 计数 组 删除 。 

【清除 】: 删除 计数 。 

【标签 颜色 】: 设置 计数 标签 颜色 。 
【标记 大 小 】: 设置 计数 标记 大 小 。 
【标签 大 小 】: 设置 计数 标签 大 小 。 


3.6 综合 应 用 


3.6.1 奥运 五 环 的 制作 

制作 奥运 五 环 的 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 ] 民 新 建 ] 命 令 或 按 快 捷 键 Ctrl 十 N, 在 打开 的 图 3-55 所 示 的 
【新 建 ] 对 话 框 中 设置 各 参数 ,然后 单 击 【确定 按钮 ,创建 一 个 图 形 文件 。 


名称 (N): 未 标题 1 
预 没 (B): 自 定 

大 站 

宽度 (W): 800 

高 度 (dtj:6o | 


分 辩 车 (R): 72 像素 /英寸 
颜色 模式 (M): RGB 颜色 ~ 8 位 
背景 内 容 (C): 白色 


加 部 


图 3-55 【新 建 ] 对 话 框 
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(2) 在 【图 层面 板 上 单 击 右边 第 2 个 按钮 (将 鼠标 指针 
放 在 上 面 几 秒 会 看 到 提示 : 创建 新 图 层 ) ,新建 一 个 透明 图 
层 , 如 图 3-56 所 示 。 

(3) 选择 工具 箱 里 的 椭圆 选 框 工具 ,在 按 住 Shift 键 的 
同时 拖 忠 (Shift 键 的 作用 是 拖 忠 出 正 圆 选区 ,如 果 想 画 出 正 
方形 选区 ,在 选择 矩形 选 框 工具 的 同时 按 住 Shift 键 ) ,创建 
一 个 正 圆 形 选区 ,如 图 3-57 所 示 。 

(4) 给 正 圆 选区 填充 颜色 。 在 色 板 里 选择 红色 进行 填 
充 ,方法 是 按 Alt 十 Delete( 注 意 , 快 捷 键 Alt 十 Delete 是 填充 
前 景色 的 ,如 果 想 填充 背景 色 , 可 以 用 Ctrl 十 Delete 快捷 图 3-56 创建 新 图 层 
键 ) ,填充 后 的 效果 如 图 3-58 所 示 。 


图 3-57 创建 正 圆 选区 图 3-58 填充 颜色 


(5) 在 选中 的 圆 上 单 击 鼠 标 右键 ,选择 【变换 选区 命令 ,然后 在 按 住 Alt 十 Shift 键 的 同 
时 从 对 角 线 的 地 方 缩小 选区 ,这 个 快捷 键 的 作用 是 让 选区 等 比例 缩小 ,感觉 大 小 合适 后 按 
Enter 键 确定 ,再 按 Backspace 键 删除 其 中 的 部 分 ,效果 如 图 3-59 所 示 ,接着 按 Ctrl 十 D 键 
取消 选区 。 

(6) 按 Ctrl 十 J 键 4 次 ,复制 出 4 个 圆 环 ,快捷 键 Ctrl 十 ] 用 于 复制 图 层 。 然 后 在 按 住 
Ctrl 键 的 同时 分 别 单 击 图 层 的 缩 略 图 选择 每 个 图 层 , 选 择 前 景色 分 别 为 黄 \、 绿 、 黑 、 蓝 ,为 图 
层 填 上 颜色 ,并 为 图 层 重新 命名 。 复 制 后 的 效果 如 图 3-60 所 示 。 


EE LE mm 
正 党 ”不 透明 度 : 人 


SAO 


图 3-59 圆 环 效果 图 3-60 复制 图 层 
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(7) 选择 工具 箱 里 的 移动 工具 (第 1 个 ) ,把 每 个 圆 环 移动 到 合适 的 位 置 , 效 果 如 图 3-61 
所 示 。 在 移动 的 时 候 可 以 按 住 Shift 键 移 动 . 这 样 能 保证 每 个 圆 环 在 水 平 位 置 上 移动 。 

(8) 选中 红色 图 层 ,在 按 住 Ctrl 键 的 同时 单 击 红 色 图 层 的 缩 略 图 ,然后 选择 工具 箱 中 的 
橡皮 擦 工具 , 单 击 【图 层面 板 里 的 黑色 图 层 . 用 橡皮 擦 擦 除 红 色 与 黑色 相交 的 部 分 (有 两 部 
分 相交 ,只 需 擦 除 其 中 的 一 部 分 ,这 样 才 会 有 黑色 从 红色 环 中 穿插 的 效果 )。 接 着 用 同样 的 
方法 选择 黄色 选区 ,在 黑色 图 层 上 擦 除 , 在 蓝 色 图 层 上 擦 除 ,再 选择 绿色 图 层 ,在 蓝 色 图 层 上 
擦 除 ,最 终 效果 如 图 3-62 所 示 。 


DO © 


图 3-61 移动 圆 环 图 3-62 奥运 五 环 效果 图 


3.6.2 矢量 图 案 的 制作 


其 制作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 [文件 I【 新 建 ] 命 令 , 创 建 一 个 图 形 文件 。 然 后 选择 椭圆 工具 ,给 
制图 3-63 所 示 的 路 径 。 

(2) 选择 路 径 选 择 工具 ,选中 绘制 好 的 椭圆 路 径 , 按 Ctrl 十 C 键 复制 路 径 , 再 按 Ctrl 十 V 
键 粘贴 路 径 。 选 择 复制 后 的 路 径 , 按 Ctrl 十 T 键 对 路 径 进 行 变形 ,再 按 住 Alt 键 将 复制 后 的 
椭圆 水 平 放 大 一 些 ,变形 后 的 效果 如 图 3-64 所 示 。 


图 3-63 ”绘制 李 圆 路 径 图 3-64 路 径 的 复制 和 变形 


(3) 选择 添加 锚 点 工具 ,移动 鼠标 指针 到 椭圆 右 侧 如 图 3-65 所 示 的 位 置 ,在 椭圆 路 径 
上 添加 两 个 锚 点 。 

(4) 选择 直接 选择 工具 ,选择 椭圆 右 侧 的 锚 点 , 按 Delete 键 删除 选择 的 锚 点 ,删除 后 的 
效果 如 图 3-66 所 示 。 

(5) 选择 钢笔 工具 ,移动 鼠标 指针 到 椭圆 右 侧 的 锚 点 上 ,绘制 人 脸 的 侧面 图 形 , 效 果 如 
图 3-67 所 示 。 

(6) 新 建 图 层 并 选中 ,将 前 景色 调 为 黑色 ,再 选择 路 径 选择 工具 ,选中 所 有 路 径 , 单 击 选 
项 栏 中 的 [排除 重 秋 区域] 按钮 ,显示 【路径 面板 ,然后 单 击 【 前 景色 填充 按钮 用 前 景色 进行 
填充 ,如 图 3-68 所 示 。 
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| | 
| | | | 
| \ 
图 3-65 ”添加 锚 点 图 3-66 ”删除 锚 点 
| 
图 3-67 用 钢笔 工具 绘制 后 的 图 形 图 3-68 填充 颜色 


(7) 选择 矩形 工具 ,在 图 案 左 侧 位 置 拖 出 一 个 矩形 区 域 , 按 Delete 键 删 除 , 效 果 如 
图 3-69 所 示 。 

(8) 按 Ctrl 十 J 键 复制 图 层 , 将 填充 色 改 为 灰色 ,然后 按 Ctrl 十 T 键 进行 自由 变换 ,选择 
【编辑 3I【 变 换 】I[ 水 平 翻转 ] 命 令 ,得 到 图 3-70 所 示 的 效果 ,最 后 将 文件 保存 。 


AAA 


图 3-69 删除 部 分 区 域 图 3-70 复制 图 形 并 翻转 


3.6.3 图 像 的 修剪 


修剪 图 像 的 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 ] 民 打开 了 命令 ,打开 
“素材 1” 文 件 。 

(2) 选择 工具 箱 中 的 裁剪 工具 ,图 形 中 心 出 现 中 
心 点 .四 周 出 现 滚动 线条 ,在 图 像 上 单 击 .图 像 上 会 
出 现 网 格 , 效 果 如 图 3-71 所 示 。 

(3) 此 时 将 鼠标 指针 移 至 图 像 的 右上 顶 角 ,旋转 
图 像 , 让 网 格 与 图 像 方向 一 致 ,效果 如 图 3-72 所 示 。 

(4) 调整 网 格 大 小 ,让 网 格 与 要 留 下 的 图 像 大 小 图 3-71 选择 裁剪 工具 并 单 击 时 
一 致 ,效果 如 图 3-73 所 示 。 图 像 的 显示 
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图 3-72 旋转 图 像 图 3-73 调整 网 格 大 小 


(5) 单 击 选项 栏 上 的 [确认] 按钮 确定 剪裁 结束 ,效果 如 图 3-74 所 示 。 
(6) 选择 菜单 栏 中 的 [图 像 ]I[ 图 像 旋 转 〗IK180 度 ] 命 令 ,效果 如 图 3-75 所 示 。 


图 3-74 ”剪裁 后 的 图 像 图 3-75 ”旋转 图 像 


(7) 保存 文件 ,图 像 的 修整 结束 。 
3.6.4 文字 标识 的 制作 


(1) 选择 菜单 栏 中 的 【文件 ] 代 新 建 ] 命 令 , 创 建 一 个 新 的 图 形 文件 ,将 宽 和 高 分 别 设置 
为 500 像素 和 200 像素 。 

(2) 选择 工具 箱 中 的 横 排 文字 工具 ,在 画布 上 的 某 位 置 单 击 并 输入 内 容 *Tsnow”, 然 后 
调整 字体 .字号 ,效果 如 图 3-76 所 示 。 
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Tsnow 


图 3-76 添加 并 修改 文字 


(3) 选中 文字 图 层 , 然 后 右 击 ,在 弹出 的 快捷 菜单 中 选择 【创建 工作 路 径 ] 命 令 , 将 文字 
图 层 隐藏 。 接 着 打开 [路径] 面板 ,查看 文字 工作 路 径 , 效 果 如 图 3-77 所 示 。 


图 3-77 文字 工作 路 径 


(4) 选择 路 径 选择 工具 ,将 工 移 到 s 上 。 然 后 选择 直接 选择 工具 ,选中 工 布 侧 的 两 个 锚 
点 , 按 住 Shift 键 ,以 直线 方式 将 其 拖 至 w 的 边缘 ,效果 如 图 3-78 所 示 。 


图 3-78 文字 工作 路 径 的 修改 


(5) 选择 矩形 工具 ,在 文字 “now” 中 部 加 一 个 矩形 路 径 。 然 后 选择 直线 工具 , 按 住 Shift 
键 在 矩形 下 面 加 一 条 3 像素 的 直线 路 径 , 效 果 如 图 3-79 所 示 。 


3-79 ”添加 路 径 
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(6) 用 路 径 选择 工具 选中 所 有 路 径 , 单 击 选项 栏 中 的 【路 径 操作 按钮 ,选择 【排除 重生 
形状 了 选项 ,效果 如 图 3-80 所 示 。 


3-80 ”排除 重 短 形 状 


(7) 在 【图 层面 板 中 新 建 一 个 图 层 并 选中 ,将 前 景色 设 为 深 红色 。 然 后 返回 [路径] 面 
板 , 单 击 【路 径 ] 面 板 下 方 的 [前 景色 填充 按钮 ,效果 如 图 3-81 所 示 。 


SOOM, 


图 3-81 填充 颜色 
(8) 用 户 可 以 根据 需要 设置 图 层 样式 等 效果 ,使 其 变 得 更 加 立体 ,最 后 保存 文件 。 
3.6.5 Logo 的 制作 


(1) 选择 菜单 栏 中 的 [文件 〗I【 新 建 3 命 令 , 创 建 一 个 新 的 图 形 文件 ,将 宽 和 高 均 设置 为 
500 像素 ,背景 为 白色 。 然 后 创建 新 层 , 用 钢笔 工具 画 出 路 径 , 在 【图 层 ] 面 板 中 单 击 [ 新 建 图 
层 ] 按 钮 ,新 建 “ 图 层 1” ,设置 前 景色 为 并 97d623 。 接 着 返回 【路 径 】 面 板 , 单 击 【前 景色 填充 】 
按钮 填充 颜色 ,效果 如 图 3-82 所 示 。 

(2) 使 用 加 深 、 减 淡 工 具 涂 抹 ,将 其 加 深 和 减 淡 ,做 出 立体 效果 ,如 图 3-83 所 示 。 


图 3-82 绘制 图 形 并 填充 图 3-83 制作 立体 效果 
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(3) 新 建 “图 层 2” ,绘制 一 个 正 圆 选 区 ,填充 颜色 #e6e3dc, 然 后 用 加 深 工 具 加 暗 , 效 果 
如 图 3-84 所 示 。 


3-84 新 图 层 效果 


(4) 单 击 [图 层面 板 下 方 的 [图 层 样式 了 按钮 ,为 图 层 添加 样式 ,样式 参数 如 图 3-85 所 示 。 


Lx) 


3-85 ”图 层 样式 参数 


(5) 新 建 “ 图 层 3”, 在 自选 图 形 中 选择 音符 , 拖 动 绘制 图 3-86 所 示 的 形状 ,颜色 为 
#94d718。 然 后 添加 图 层 样式 ,样式 参数 如 图 3-87 所 示 。 


图 3-86 添加 自选 图 形 
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漫 合 模式 人 ): 正片 至 斌 


7 
To 一 人 


% 
A (ST) 5 asa 


图 3-87 自选 图 形 样式 参数 
删除 ,效果 如 图 3-88 所 示 。 


(6) 新 建 “ 图 层 4”, 调 出 符号 选区 ,填充 白色 .图 层 不 透明 度 为 50% 。 然 后 用 套 索 工具 
效果 如 图 3-89 所 示 。 


(7) 新 建 “ 图 层 5”, 羽化 值 为 5, 用 椭圆 工具 绘制 一 个 小 的 椭圆 ,为 整体 添加 阴影 ,最 终 


图 3-88 


图 层 4 的 修改 效果 


3-89 最终 效果 图 


本 章 学 习 目 标 : 

名 了 解 图 层 、 通 道 、 莹 版 的 基础 知识 。 
名 掌握 图 层 、 通 道 、 蒙 版 的 各 种 操作 。 
名 掌握 图 层 、 通 道 、 蒙 版 的 综合 应 用 。 


@1 图 层 
》— 
图 层 是 Photoshop 中 最 常用 的 容器 ,我们 建议 将 不 同 的 对 象 放置 于 不 同 的 图 层 上 。 


4.1.1 图 层 的 基本 概念 


什么 是 图 层 ? 为 了 方便 读者 理解 ,可 以 打 一 个 简单 的 比方 来 说 明 。 

比如 要 在 一 张 纸 上 绘画 , 当 需 要 在 画 上 添加 一 些 新 的 图 案 时 ,可 以 先 在 纸 上 铺 一 张 透明 
纸 ,在 这 张 透明 纸 上 再 绘制 要 添加 的 图 案 , 并 可 以 通过 移动 纸 或 透明 纸 的 位 置 来 改变 两 层 图 
案 的 相对 位 置 ,也 可 以 添加 或 拿 开 部 分 透明 纸 来 观察 在 图 像 中 添加 或 减 去 部 分 内 容 后 的 效 
果 。 用 户 可 以 根据 需要 添加 很 多 层 透明 纸 , 以 便 对 图 像 的 效果 进行 灵活 调整 ,实际 上 这 种 方 
法 常用 于 动画 片 的 制作 。 

Photoshop 就 是 利用 了 这 种 原理 ,绘制 图 像 的 纸 和 这 些 透明 纸 相当 于 Photoshop 中 的 
图 层 , 这 种 图 层 堆 放 的 关系 称 为 堆 徐 。 一 个 文件 中 的 所 有 图 层 都 具有 相同 的 分 辩 率 、 相 同 的 
通道 数 以 及 相同 的 图 像 模式 。 


1. 常用 的 图 层 类 型 


Photoshop 中 的 图 层 类 型 很 多 .下 面 首先 了 解 一 些 经 常用 到 的 图 层 类 型 。 

1) 普通 层 

普通 层 是 最 基本 的 图 层 类 型 , 它 在 图 像 中 的 作用 相当 于 前 面 所 说 的 一 张 透明 纸 。 

2) 背景 层 

在 Photoshop 中 ,背景 层 相 当 于 绘画 时 最 下 层 的 不 透明 纸 。 一 幅 图 像 可 以 没有 背景 层 ， 
但 如 果 有 则 只 能 有 一 个 背景 层 。 背 景 层 无 法 与 其 他 层 交 换 堆 释 次 序 , 但 背景 层 可 以 与 普通 
层 相互 转换 。 
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3) 文字 层 

使 用 工具 箱 中 的 文字 工具 在 图 像 中 创建 文字 后 ,系统 将 自动 新 建 一 个 图 层 。 在 【图 层 】 
面板 中 ,如 果 某 层 的 缩 览 图 为 “T? 图 标 , 则 该 层 为 文字 层 。 文 字 层 主要 用 于 编辑 文字 的 内 
容 、 属 性 和 方向 。 文 字 层 可 以 进行 移动 .调整 堆 秋 顺序、 复制 等 操作 ,但 大 多 数 编辑 工具 和 命 
令 不 能 在 文字 层 中 使 用 ,如 果 要 使 用 ,需要 将 文字 层 转 换 为 普通 层 。 

4) 调节 层 

通过 调节 层 可 以 调节 其 下 方 所 有 图 层 中 图 像 的 色调 ,亮度 及 饱和 度 等 。 在 【图 层面 板 
中 ,调节 层 的 图 层 缩 览 图 会 根据 调节 层 的 具体 类 型 发 生变 化 。 

5) 效果 层 

用 户 可 以 对 图 层 使 用 图 层 样 式 , 也 就 是 使 该 层 产 生 立 体 、 发 光 及 填充 等 效果 。 当 为 一 个 
图 层 应 用 图 层 样式 时 ,该 层 右 侧 将 出 现 蕊 ,表示 该 图 层 是 带 有 图 层 样式 的 效果 层 。 

6) 形状 层 

形状 层 是 利用 工具 箱 中 的 图 形 工具 创建 的 图 层 , 它 主要 用 于 在 图 像 中 创建 各 种 矢量 形 
状 ,如 和 矩形. 花 条 等 。 该 类 图 层 主要 包含 3 部 分 内 容 , 即 填充 内 容 、 形 状 和 矢量 蒙 版 。 

7) 图 层 组 

图 层 组 是 图 层 的 组 合 , 它 的 作用 相当 于 Windows 系统 资源 管理 器 中 的 文件 夹 , 主 要 用 
于 组 织 和 管理 连续 图 层 。 

8) 蒙 版 层 

图 层 蒙 版 的 作用 是 根据 蒙 版 中 颜色 的 变化 使 其 所 在 层 图 像 的 相应 位 置 产 生 透明 效果 。 
蒙 版 层 的 内 容 比 较 复 杂 , 而 且 一 般 需 要 与 其 他 命令 和 工具 结合 起 来 使 用 。 

9) 图 层 剪贴 组 

在 图 层 剪 贴 组 中 用 基底 层 (基底 层 是 指 图 层 剪贴 组 中 最 下 方 的 图 层 ) 充 当 整 个 组 的 蒙 
版 。 也 就 是 说 ,一 个 图 层 剪贴 组 的 不 透明 度 是 由 基底 层 的 不 透明 度 来 决定 的 。 

10) 智能 对 象 

在 Photoshop 中 可 以 通过 转换 一 个 或 多 个 图 层 来 创建 智能 对 象 。 在 【图 层 ] 面 板 中 双击 
智能 对 象 符号 的 图 层 缩 略图 ,就 能 创建 一 个 新 的 文件 图 像 。 在 对 新 图 像 编辑 后 保存 ,原文 件 
中 的 “智能 对 象 " 也 会 自动 更 新 。 


2.【 图 层面 板 


图 层 
【图 层面 板 是 用 来 管理 和 操作 图 层 的 ,对 图 层 进行 的 大 
多 数 设置 和 修改 操作 都 是 在 [图 层面 板 中 完成 的 。 打 开 文件 
后 的 [图 层 ] 面 板 如 图 4-1 所 示 。 
。【 图 层 标签 】: 位 于 [图 层 ] 面 板 的 左上 角 , 单 击 可 将 其 
置 为 当前 工作 状态 。 
。【 面 板 菜 单 ] 按 钮 : 位 于 面板 的 右上 角 , 单 击 可 以 弹出 
控制 面板 的 下 拉 菜 单 。 
。【 图 层 分 类 搜索 ] 按 钮 : 在 其 下 拉 列 表 中 选择 搜索 图 
层 的 依据 , 按 类 型 .名称 、 颜 色 、 效 果 、 模 式 、 属 性 对 不 
同 的 图 层 进行 搜索 ,以 将 相关 的 图 层 显示 出 来 。 图 4-1 【图 层 ] 面 板 
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【图 层 混合 模式 】 下 拉 列 表 : 在 下 拉 列 表 中 选择 当前 图 层 与 其 下 面 图 层 混 合 的 模式 。 
【锁定 图 层 ] 选 项 组 : 对 图 层 中 的 透明 度 、 像 素 、 位 置 进行 锁定 。 

【不 透明 度 】: 决定 当前 层 的 透明 程度 。 

【填充 】: 主要 适用 于 带 样式 的 图 层 。 在 一 个 带 样式 的 图 层 中 ,【 不 透明 度 ] 文 本 框 中 
的 值 会 同时 影响 当前 图 层 中 图 像 和 样式 的 透明 度 .【 填 充 ] 框 中 的 值 只 影响 当前 图 层 
中 的 图 像 透 明度 ,不 影响 样式 透明 度 。 

【图 层 缩 略 图 】: 显示 本 层 图 像 的 缩 略图 , 它 随 着 图 层 图 像 的 变化 随时 更 新 ,便于 用 
户 在 处 理 图 像 时 做 参考 。 

【图 层 名 称 】: 显示 图 层 的 名 称 ,创建 或 复制 后 的 新 图 层 会 默认 指定 一 个 图 层 名 称 ， 
为 了 方便 编辑 与 查询 ,可 以 双击 图 层 名 称 , 在 文本 框 中 输入 自 定义 的 名 称 。 

【显示 /隐藏 图 层 ] 图 标 : 用 于 表示 图 层 处 于 显示 还 是 隐藏 状态 。 

【链接 图 层 ] 按 钮 : 当选 择 两 个 以 上 的 图 层 时 ,该 按钮 才 可 用 。 单 击 该 按钮 ,可 以 链 
接 两 个 或 多 个 图 层 。 链 接 后 的 图 层 可 以 被 一 起 移动 ,也 可 以 在 链接 图 层 间 执行 对 章 
与 分 布 、 合 并 等 操作 。 

【添加 图 层 样式 了 按钮 : 单 击 该 按钮 ,在 弹出 的 菜单 中 选择 相应 的 命令 ,可 以 在 图 像 
中 添加 投影 ,发 光 、 浮 雕 、 渐 变 及 图 案 等 效果 。 这 些 效 果 被 链接 到 当前 图 层 的 内 容 
上 ,在 移动 或 编辑 图 层 中 的 内 容 时 ,图 层 效 果 被 相应 更 改 。 这 些 图 层 效 果 常 被 用 于 
加 强 图 像 中 的 效果 。 

【添加 图 层 蒙 版 3 按钮 : 单 击 该 按钮 ,可 以 在 当前 层 上 创建 图 层 蒙 版 。 如 果 先 在 图 像 
中 创建 适当 的 选区 ,再 单 击 此 按钮 , 则 可 以 根据 选区 范围 在 当前 层 上 建立 适当 的 图 
【创建 新 的 填充 或 调整 图 层 ] 按 钮 : 单 击 该 按钮 ,可 以 在 当前 层 上 方 创建 一 个 新 填充 
图 层 或 调整 图 层 , 从 而 对 当前 图 层 下 面 的 图 层 进行 色调 、 明 度 等 颜色 调整 。 
【创建 新 组 ] 按 钮 : 单 击 该 按钮 ,在 【图 层面 板 中 将 创建 一 个 新 的 组 ,类 似 一 个 文件 
夹 , 便 于 对 图 层 进行 管理 与 查询 。 

【创建 新 图 层 ] 按 钮 : 单 击 该 按钮 ,可 以 在 当前 层 上 方 创建 一 个 新 的 透明 图 层 。 

【 圳 除 图 层 3 按 钮 : 单 击 该 按钮 ,可 以 删除 当前 图 层 。 


.1.2 图 层 的 基本 操作 
. 选择 图 层 


选择 单个 图 层 : 在 需要 操作 的 图 层 上 单 击 , 当 图 层 显示 为 蓝 色 时 ,表示 该 图 层 是 当 
前 编辑 图 层 。 

选择 多 个 图 层 : 按 住 Ctrl 键 ,可 以 间隔 选取 多 个 图 层 , 按 住 Shift 键 则 选取 两 个 图 层 
之 间 的 所 有 图 层 。 


修改 图 层 名 称 


在 图 层 的 名 称 上 双击 , 即 可 修改 图 层 的 名 称 。 
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3. 新 建 图 层 
单 击 [创建 新 图 层 ] 按 钮 ,可 以 在 当前 层 的 上 方 添加 一 个 新 图 层 , 新 添加 的 图 层 为 普通 层 。 
4. 调整 图 层 堆 又 位 置 


常用 的 调整 图 层 堆 秋 位 置 的 方法 有 以 下 两 种 : 

。 利 用 鼠标 在 【图 层面 板 中 直接 拖 忠 调整 图 层 堆 释 位 置 。 

。 打开 【图 层 了 面板 ,在 要 移动 的 图 层 上 按 住 鼠标 左 键 不 放 拖 彼 至 目的 位 置 ,释放 鼠标 
即 可 。 


5. 复制 图 层 


拖 忠 要 复制 的 图 层 至 [创建 新 图 层 ] 按 钮 上 ,然后 释放 鼠标 左 键 , 即 可 在 被 复制 的 图 层 上 
方 复制 一 个 新 图 层 。 


6. 删除 图 层 
拖 忠 要 删除 的 图 层 至 [删除 图 层 按 钮 上 ,可 以 直接 删除 该 图 层 。 
7. 合并 图 层 


在 制作 复杂 的 实例 时 ,可 以 将 不 需要 进行 调整 的 多 个 图 层 合并 ,以 方便 后 面 的 操作 。 合 
并 图 层 的 菜单 命令 有 【合并 图 层 ]〗 工 合并 可 见 图 层 ] 和 【拼合 图 
像 】, 在 【图 层 了 荣 单 中 选择 相应 的 命令 , 即 可 在 不 同情 况 下 合并 
图 层 。【 图 层 了 沫 单 如 图 4-2 所 示 。 


8. 对 齐 图 层 


在 制作 图 像 的 过 程 中 ,经 常 需要 将 几 个 图 层 向 左 、 向 右 、 向 
上 向 下 或 居中 对 章 。 

1) 对 齐 多 个 图 层 

在 同时 选中 了 多 个 图 层 后 ,选择 菜单 栏 中 的 [图 层 〗I[ 对 齐 】 
命令 。 
2) 对 齐 链 接 图 层 
当 【 图 层面 板 中 有 链接 图 层 时 ,选择 链接 图 层 中 的 某 个 图 
层 后 ,利用 菜单 栏 中 的 [图 层 〗I[ 对 齐 ] 命 令 也 可 以 对 齐 图 层 。 此 
时 当前 选择 的 图 层 会 作为 基准 , 即 该 图 层 中 的 图 像 不 动 .其 他 图 
层 与 该 图 层 对 齐 。 

3) 将 图 层 与 选区 对 齐 

当 图 像 中 存在 选区 时 ,可 以 将 当前 图 层 与 选区 对 齐 。 在 [图 
层面 板 中 选中 要 向 选区 对 齐 的 图 层 ,然后 选择 菜单 栏 中 的 [图 
层 〗I[ 将 图 层 与 选区 对 齐 ] 命 令 ,接着 在 弹出 的 子 菜单 中 选择 所 
需 的 命令 , 即 可 将 当前 图 层 与 选区 按 要 求 对 齐 。 四 
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9. 分 布 图 层 


在 制作 图 像 的 过 程 中 ,经 常 需要 将 几 个 图 层 平均 分 布 ,例如 制作 一 排 间 距 相 等 的 栅栏 
等 ,Photoshop 提供 了 平均 分 布 图 层 的 命令 。 

使 用 平均 分 布 图 层 的 命令 有 两 个 必要 条 件 ,一 是 必须 有 两 个 以 上 的 图 层 ,二 是 这 些 图 层 必 
须 全 部 是 链接 图 层 。 在 分 布 前 , 先 选择 两 个 图 层 ,将 它们 移动 到 分 布 的 起 点 和 终点 位 置 ,然后 
将 所 有 要 平均 分 布 的 图 层 链接 ,最 后 选择 菜单 栏 中 的 [图 层 了 区 分 布 3 命令 将 各 层 平均 分 布 。 


4.1.3 图 层 样式 


在 前 面 介 绍 图 层 类 型 时 曾经 讲 过 ,在 【图 层面 板 上 某 层 的 右 侧 若 出 现 【 效 果 层 图 标 , 该 
图 层 就 是 一 个 效果 层 ,在 效果 层 中 可 以 产生 立体 、 发 光 及 填充 等 效果 。 效 果 层 实际 上 是 应 用 
了 图 层 样式 的 图 层 。 


1. 使 用 图 层 样式 


选择 [图 层 ] 民 图 层 样式 ] 民 混合 选项 命令 ,或 双击 图 层 缩 略 图 或 者 图 层 名 称 右 侧 的 空 
白 处 ,或 单 击 [ 图 层 了 面板 底部 的 [图 层 样式 了 按钮 , 均 可 弹出 【图 层 样式 ] 对 话 框 ,如 图 4-3 所 
示 。 该 对 话 框 左 侧 为 图 层 样式 选项 列表 区 ,在 该 对 话 框 中 可 以 设置 多 个 图 层 样式 ; 中 间 为 
参数 设置 区 ,在 此 可 以 设置 各 个 图 层 样 式 的 参数 ,从 而 获得 不 同 的 图 层 样式 效果 ; 右 侧 为 预 
览 区 ,用 户 能 够 在 设置 参数 时 实时 预览 到 参数 调整 对 整体 效果 的 影响 。 


“DEE 
Geaaasaco 


图 4-3 【图 层 样式 ] 对 话 框 


【混合 选项 : 默认 了 的 图 层 样式 选项 包括 【投影 〗】 工 内 阴影 】 工 外 发 光 ]】 工 内 发 光 ] 工 斜面 
和 浮雕 】【 光 泽 ]【 颜 色 释 加】【 图 案 释 加 及 【 描 边 ] 等 。 勾 选 不 同 的 选项 后 ,相应 的 参数 设 
置 及 选项 栏 会 随 之 更 新 ,通过 设置 不 同 的 参数 可 以 产生 不 同 的 图 层 样式 效果 。 

在 【图 层 样式 ] 对 话 框 左 侧 单 击 【样式 了 , 右 侧 更 新 为 Photoshop 提供 的 默认 样式 列表 , 单 
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击 相 应 的 样式 就 可 以 将 其 应 用 到 当前 图 层 中 , 单 击 列表 中 的 【取消 样式 ] 按 钮 可 以 取消 当前 
图 层 应 用 的 样式 。 


2. 保存 图 层 样 式 


除了 可 以 使 用 Photoshop 自 带 的 预 设 图 层 样式 外 ,用 户 还 可 以 将 自己 设置 好 的 图 层 样 
式 定义 为 新 的 预 设 样式 ,在 其 他 文件 或 以 后 的 工作 中 调和 人 使 用 。 
选择 菜单 栏 中 的 [窗口 3I【 样 式 ] 命 令 , 即 可 打开 [样式 ] 面 板 添加 样式 。 


3. 复制 .粘贴 和 清除 图 层 样式 


在 Photoshop 中 ,图 层 样式 与 图 像 .文字 一 样 , 也 可 以 进行 复制 和 粘贴 的 操作 。 选 中 应 用 
样式 的 图 层 , 然 后 右 击 ,在 快捷 菜单 中 对 图 层 样式 进行 复制 .粘贴 和 清除 操作 。 除 了 可 以 在 同 
一 文件 的 不 同 图 层 间 进行 图 层 样式 的 复制 ,粘贴 外 ,还 可 以 在 不 同文 件 的 图 层 间 进行 相关 操作 。 


4. 图 层 样式 的 全 局 设置 


除了 可 以 对 图 层 样式 中 的 各 个 效果 进行 单独 设置 外 ,还 可 以 对 整体 效果 使 用 一 些 命令 
进行 设置 ,这 些 命令 称 为 图 层 样式 的 全 局 设置 命令 。 选 中 应 用 样式 的 图 层 , 然 后 右 击 , 在 快 
捷 菜 单 中 选择 相应 命令 进行 设置 即 可 。 


4.1.4 图 层 的 混合 模式 


一 个 图 层 的 混合 模式 将 决定 当前 图 层 中 的 像素 与 其 下 面 图 层 中 的 像素 以 何 种 模式 进行 
混合 。 在 【图 层面 板 左 上 角 有 一 个 【图 层 混 合 模式 下 拉 列 
表 , 在 此 列表 中 包括 25 种 图 层 混合 模式 选项 ,选择 不 同 的 选 
项 可 以 将 当前 图 层 设 为 不 同 的 混合 模式 ,从 而 使 其 产生 不 同 
的 效果 。 图 层 混 合 模式 选项 如 图 4-4 所 示 。 

在 下 面 介 绍 图 层 模式 的 时 候 会 反复 使 用 基色 、 混 合 色 和 
结果 色 3 个 术语 ,为 了 使 读者 能 够 更 好 地 理解 这 部 分 内 容 , 首 
先 对 这 3 个 术语 进行 介绍 。 

。 基色 : 当前 图 层 之 下 的 图 层 颜色 。 

。 混 合 色 : 当前 图 层 的 颜色 。 

。 结 果 色 : 混合 后 得 到 的 颜色 。 


1. 两 种 基本 模式 
1)【 正 常 ] 模 式 
在 【正常 ] 模 式 下 编辑 或 绘制 的 每 个 像素 都 将 直接 成 为 结 ”| 一 一 一 | 
果 色 ,这 是 默认 的 模式 ,也 是 图 像 原来 的 状态 。 Pe 
2) 【溶解 ] 模 式 EE 


使 用 [溶解 3 模式 ,Photoshop 会 将 当前 层 中 的 部 分 结果 攻 
色 以 基色 和 混合 色 进 行 随机 蔡 换 , 蔡 换 的 程度 取决 于 该 像素 
的 不 透明 度 ,使 用 [溶解 3 模式 往往 在 图 像 中 产生 杂 点 的 效果 。 ”图 4-4 图 层 混合 模式 选项 
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2. 5 种 模式 能 使 图 像 产生 变 暗 的 效果 


1)【 变 暗 了 模式 

使 用 [ 变 暗 ] 模 式 ,当前 图 层 中 的 图 像 会 选择 基色 或 混合 颜色 中 较 暗 的 部 分 作为 结果 色 ， 
比 混合 色 亮 的 像素 将 被 蔡 换 ,而 比 混合 色 暗 的 像素 不 改变 ,从 而 使 整个 图 像 产生 变 暗 的 
效果 。 

2)【 正 片 琶 底 ] 模 式 

【正片 和 琶 底 3 模式 根据 混合 图 层 图 像 的 颜色 将 底层 图 像 表 现 得 灰暗 。 使 用 【正片 琶 底 3 模 
式 的 图 层 查看 每 个 通道 中 的 颜色 信息 是 把 基色 与 混合 色相 乘 , 将 任何 颜色 与 黑色 相 乘 产生 
黑色 ,将 任何 颜色 与 白色 相 乘 则 颜色 保持 不 变 。 【正片 释 底 3 模式 产生 的 结果 颜色 总 是 相对 
较 暗 。 

3)【 颜 色 加深 ] 模 式 

【颜色 加 深 模 式 是 将 两 个 图 层 的 颜色 混合 得 上 暗 一 些 , 混 合 后 的 颜色 对 比 度 变 强 ,使 得 图 
像 整 体 变 得 鲜亮 。 

4)【 线 性 加 深 ] 模 式 

【线性 加 深 了 模式 通过 减 小 亮度 使 基色 变 暗 以 反映 混合 色 , 在 混合 图 层 图 像 的 颜色 变 暗 
时 ,背景 色 也 将 变 暗 ,在 两 个 颜色 混合 时 ,颜色 将 保持 比较 清晰 的 状态 ,两 个 图 像 都 能 均等 的 

5)【 深 色 了 模式 

【 深 色 模式 通过 比较 混合 色 和 基色 的 所 有 通道 值 的 总 和 并 从 中 选择 最 小 的 通道 值 来 创 
建 结 果 色 ,从 而 使 整个 图 像 产生 变 暗 的 效果 。 


3. 5 种 图 层 模式 能 使 图 像 产生 变 亮 的 效果 


1)【 变 亮 ] 模 式 

【 变 亮 3 模式 与 【[ 变 暗 】 模 式 相 反 , 它 是 通过 比较 基色 与 混合 色 , 将 比 混合 色 暗 的 像素 蔡 
换 , 而 比 混合 色 亮 的 像素 不 改变 ,从 而 使 整个 图 像 产 生变 亮 的 效果 。 

2)【 滤 色 ] 模 式 

【 滤 色 模式 与 【正片 琶 底 模式 相反 , 它 是 查看 每 个 通道 的 颜色 信息 ,并 将 混合 色 的 互补 
色 与 基色 相 乘 ,从 而 产生 相对 较 亮 的 效果 。 

3)【 颜 色 减 淡 3 模 式 

【颜色 减 淡 ] 模 式 与 【颜色 加 深 模 式 相 反 , 使 用 [颜色 减 淡 ] 模 式 的 图 层 查 看 每 个 通道 中 
的 颜色 信息 ,使 基色 变 亮 以 反映 混合 颜色 ,与 黑色 混合 则 不 发 生变 化 。 

4)【 线 性 减 淡 3 模式 

使 用 [线性 减 淡 3 模 式 的 图 层 查看 每 个 通道 中 的 颜色 信息 ,并 通过 增加 亮度 使 基色 变 亮 
以 反映 混合 色 ,与 黑色 混合 则 不 发 生变 化 。 

5)【 浅 色 ] 模 式 

【 浅 色 模式 通过 比较 混合 色 和 基色 的 所 有 通道 值 的 总 和 并 从 中 选择 最 大 的 通道 值 来 创 
建 结 果 颜 色 , 从 而 使 整个 图 像 产 生变 亮 的 效果 。 


了 


hh 
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4. 不 是 单纯 地 将 图 像 变 暗 或 变 亮 的 图 层 模 式 


下 面 7 种 图 层 模式 的 计算 方法 相对 复杂 ,它们 不 是 单纯 地 将 图 像 变 暗 或 变 亮 ,而 是 根据 
图 像 的 具体 情况 进行 不 同 的 处 理 。 

1)【 秋 加 3 模式 

根据 紧 临 当前 图 层 的 下 一 层 图 层 的 颜色 使 当前 图 层 与 其 下 层 图 层 的 颜色 产生 不 同 的 混 
合 , 同 时 保留 下 层 图 层 的 亮度 和 上 暗 度 ,使 当前 图 层 产生 一 种 透明 的 效果 。 

2)【 柔 光 ] 模 式 

【和 柔 光 模式 产生 的 效果 与 将 发 散 的 聚光灯 照 在 图 像 上 相似 , 它 可 能 使 当前 颜色 变 暗 ,也 
可 能 使 其 变 亮 。 如 果 当 前 的 混合 色 比 50% 灰 色 亮 , 则 图 像 会 变 亮 ; 如 果 比 50% 灰 色 上 暗 , 则 
图 像 会 变 暗 。 在 使 用 [ 柔 光 模式 的 图 层 中 用 纯 黑 色 或 纯 白 色 作画 会 产生 明显 较 暗 或 较 亮 的 
区 域 ,但 不 会 产生 纯 黑 色 或 纯 白色 的 区 域 。 

3)【 强 光 ] 模 式 

【 强 光 ] 模 式 产生 的 效果 与 将 炊 眼 的 聚光灯 照 在 图 像 上 相似 , 它 是 根据 混合 色 的 亮度 对 
当前 颜色 执行 【正片 释 底 模式 或 [屏幕 模式。 

4)【 亮 光 ] 模 式 

【亮光 模式 通过 增加 或 减 小 图 像 对 比 度 来 加 深 或 减 淡 颜 色 。 如 果 混 合 色 比 50% 灰 色 
亮 , 则 通过 减 小 对 比 度 使 图 像 变 亮 ; 如 果 混 合 色 比 50% 灰 色 暗 , 则 通过 增加 对 比 度 使 图 像 
变 暗 。 

5)【 线 性 光 ] 模 式 

【线性 光 ] 模 式 通 过 减 小 或 增加 亮度 来 加 深 或 减 淡 颜色 ,具体 取决 于 混合 色 。 如 果 混 合 
色 比 50% 灰 色 亮 , 则 通过 增加 亮度 使 图 像 变 亮 ; 如 果 混 合 色 比 50% 灰 色 暗 , 则 通过 减 小 亮 
度 使 图 像 变 暗 。 

6)【 点 光 ] 模 式 

使 用 [点 光 了 模式 可 以 根据 混合 色 的 不 同 而 产生 不 同 的 替换 颜色 效果 。 如 果 混 合 色 比 
50% 灰 色 亮 , 则 替换 比 混合 色 上 暗 的 像素 ,而 不 改变 比 混合 色 亮 的 像素 ; 如 果 混 合 色 比 50% 灰 
色 暗 , 则 替换 比 混合 色 亮 的 像素 ,而 不 改变 比 混合 色 暗 的 像素 。 

7)【 实 色 混 合 ] 模 式 

【 实 色 混 合 ] 模 式 取消 了 中 间 色 的 效果 ,混合 的 结果 只 包含 纯色 。 


5. 根据 颜色 的 变化 对 基色 和 混合 色 进 行 混合 产生 结果 色 的 模式 


1)【 差 值 ] 模 式 

【 差 值 ] 模 式 是 从 背景 图 像 的 色调 中 减 去 混合 图 层 图 像 的 色调 来 表现 两 个 色调 的 互补 
色 ,混合 图 层 图 像 的 色调 越 高 ,效果 表现 得 越 强烈 。 与 白色 混合 会 使 基色 产生 反 相 的 效果 ， 
与 黑色 混合 不 产生 变化 。 

2)【 排 除 ] 模 式 

使 用 [排除 ] 模 式 可 以 产生 一 种 与 [ 差 值 模式 相似 但 对 比 度 较 低 的 效果 。 与 白色 混合 会 
使 基色 产生 反 相 的 效果 ,与 黑色 混合 不 产生 变化 。 
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6. 利用 基色 和 混合 色 的 不 同属 性 产生 结果 色 的 模式 


1D【 色 相模 式 

【色相 模式 是 用 基色 的 亮度 和 饱和 度 以 及 混合 色 的 色相 创建 结果 色 。 

2)【 饱 和 度 ] 模 式 

【饱和 度 3 模 式 是 用 基色 的 亮度 和 色相 以 及 混合 色 的 饱和 度 创建 结果 色 , 在 "0” 饱 和 度 
(也 就 是 灰色 ) 的 区 域 上 使 用 此 模式 不 会 产生 变化 。 

3)【 颜 色 ] 模 式 

【颜色 模式 是 用 基色 的 亮度 ` 混 合 色 的 色相 和 饱和 度 创 建 结果 色 ,这 样 可 保留 图 像 中 的 
灰 阶 ,并 且 对 于 给 单 色 图 像 上 色 和 给 彩色 图 像 着 色 非 常 有 用 。 

4)【 明 度 了 模式 

【明度 模式 是 用 基色 的 色相 和 饱和 度 以 及 混合 色 的 亮度 创建 结果 色 ,【 明 度 ] 模 式 产 生 
的 效果 与 [颜色] 模式 相反 。 


.2 通道 


通道 的 主要 功能 是 快速 地 创建 或 存储 选区 ,并 对 复杂 图 像 的 选取 或 制作 图 像 的 特殊 效 
果 非 常 有 帮助 。 通 道 是 用 来 存储 图 层 选取 信息 的 又 一 特殊 图 层 , 在 通道 中 同样 可 以 进行 绘 
图 与 编辑 等 操作 。 


4.2.1 通道 的 基本 概念 


在 Photoshop 中 ,通道 主要 用 来 保存 图 像 的 色彩 信息 和 选区 ,可 分 为 两 大 类 , 即 颜色 通 
道 和 Alpha 通道。 颜色 通道 主要 用 来 保存 图 像 的 色彩 信息 ,Alpha 通道 主要 用 来 保存 选区 ， 
但 这 并 不 是 一 成 不 变 的 。 


1. 颜色 通道 


保存 图 像 颜 色 信 息 的 通道 称 为 颜色 通道 。 每 个 图 像 都 有 一 个 或 多 个 颜色 通道 ,图 像 中 
默认 的 颜色 通道 数 取 决 于 其 颜色 模式 。 例 如 ,CMYK 图 像 默 认 有 4 个 通道 ,分别 代表 青色 、 
洋红 、 黄 色 和 黑色 信息 。 在 默认 情况 下 .位 图 模式 、 灰 度 、 双 色调 和 索引 颜色 图 像 只 有 一 个 通 
道 ,RGB 和 Lab 图像 有 3 个 通道 ,CMYK 图 像 有 4 个 通道 。 

每 个 颜色 通道 都 存放 着 图 像 中 颜色 元 素 的 信息 ,所 有 颜色 通道 中 的 颜色 释 加 混合 将 产 
生 图 像 中 像素 的 颜色 。 读 者 可 以 将 通道 看 作 印刷 中 的 印 版 , 即 单个 印 版 对 应 每 个 颜色 图 层 。 

在 【通道 面板 中 通道 都 显示 为 灰色 , 它 通过 不 同 的 灰 度 表示 0 一 255 级 亮度 的 颜色 。 
为 通道 的 效果 较 难 控制 ,通常 不 直接 修改 颜色 通道 改变 图 像 的 颜色 。 

除了 默认 的 颜色 通道 外 ,用 户 还 可 以 在 图 像 中 创建 专 色 通 道 ,例如 在 图 像 中 添加 黄色 、 
紫色 等 通道 。 在 图 像 中 添加 专 色 通 道 后 ,必须 将 图 像 转换 为 多 通道 模式 。 


2. Alpha 通道 


除了 颜色 通道 外 ,用 户 还 可 以 在 图 像 中 创建 Alpha 通道 ,以 便于 保存 和 编辑 蒙 版 及 选 
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区 。 用 户 可 以 在 [通道] 面板 中 创建 Alpha 通道 ,并 根据 需要 进行 编辑 ,然后 再 调用 选区 ; 也 
可 以 在 图 像 中 建立 选区 ,然后 选择 【选择 3I【 存 储 选 区 ] 命 令 , 将 现 有 的 选区 保存 为 新 的 
Alpha 通道 。 

Alpha 通道 也 使 用 灰 度 表示 ,其 中 白色 部 分 对 应 100% 选 择 的 图 像 ,黑色 部 分 对 应 未 选 
择 的 图 像 ,灰色 部 分 表示 相应 的 过 渡 选 择 , 即 选区 有 相应 的 透明 度 。 

Alpha 通道 也 可 以 转换 为 颜色 通道 。 


4.2.2 【通道 面板 


1. 从 通道 载 入 选区 


按 住 Ctrl 键 ,在 【通道 3 面板 上 单 击 通道 的 缩 略图 ,可 以 根据 该 通道 在 图 像 窗口 中 建立 
新 的 选区 。 

如 果 图 像 窗口 中 已 有 选区 ,可 进行 以 下 操作 : 

。 按 住 Ctrl 十 Alt 键 , 在 【通道 面板 上 单 击 通道 的 缩 略图 ,新 生成 的 选区 是 从 原 选区 减 
去 根据 该 通道 建立 的 选区 部 分 。 

。 按 住 Ctrl 十 Shift 键 ,在 【通道 面板 上 单 击 通 道 的 缩 略图 ,根据 该 通道 建立 的 选区 添 
加 至 原 选区 。 

。 按 住 Ctrl 二 Shif 十 Alt 键 ,在 [通道] 面板 上 单 击 通道 的 缩 略 图 ,根据 该 通道 建立 的 选 
区 与 原 选区 重 释 的 部 分 作为 新 的 选区 。 


2.【 通 道 ] 面 板 简介 


在 Photoshop 提供 的 [通道 3 面板 中 可 以 创建 和 管理 通道 ,并 观察 编辑 效果 。 在 【通道 】 
面板 上 列 出 了 当前 图 像 中 的 所 有 通道 ,最 上 方 是 复合 通道 (在 RGB.CMYK 和 Lab 图像 中 ， 
复合 通道 为 各 个 颜色 通道 琶 加 的 效果 ) ,然后 是 单个 颜色 通道 、 专 色 通道 ,最 后 是 Alpha 通 
道 , 如 图 4-5 所 示 。 

1) 功能 按钮 

【通道 面板 下 方 有 4 个 功能 按钮 ,将 鼠标 指针 移 至 按 
钮 图 标 处 会 出 现 按钮 的 功能 介绍 , 单 击 相应 的 按钮 完成 
相应 的 设置 。 

2) 通道 的 基本 操作 

通道 的 创建 复制 等 操作 与 图 层 相似 , 这 里 不 再 详细 
介绍 。 

在 [通道] 面板 中 单 击 复合 通道 会 同时 选择 复合 通道 
及 颜色 通道 ,此 时 在 图 像 窗口 中 将 显示 图 像 的 效果 ,可 以 
对 图 像 进行 编辑 。 

单 击 除 复合 通道 外 的 任意 通道 ,在 图 像 窗口 中 将 显 
示 出 相应 的 通道 效果 ,此 时 可 以 对 选择 的 通道 进行 编辑 。 

按 住 Shift 键 可 以 同时 选择 几 个 通道 ,在 图 像 窗 口中 
显示 被 选择 通道 的 释 加 效果 。 图 4-5 【通道 面板 
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单 击 通道 左 侧 的 按钮 可 以 隐藏 其 对 应 的 通道 效果 ,再 次 单 击 该 按钮 , 则 可 以 将 通道 的 效 
果 显 示 出 来 。 

3)【 通 道 ] 面 板 菜单 

单 击 【通道 7 面板 右上 角 的 按钮 ,将 弹出 [ 通 
道 3 面 板 菜单 ,如 图 4-6 所 示 。 

4) 创建 新 Alpha 通道 

【新 建 通道 ] 命 令 用 于 创建 新 的 Alpha 通道 ， 
选择 该 命令 ,在 [名 称 ] 文 本 框 中 输入 新 Alpha 通 
道 的 名 称 即 可 。 在 【色彩 指示 】 选 项 栏 中 选择 [被 
蒙 版 区 域 ] 单 选 按 钮 ,将 创建 一 个 黑色 的 Alpha 
通道 ; 选择 【所 选区 域 单 选 按钮 , 则 将 创建 一 个 
白色 的 Alpha 通道 。 

5) 复制 通道 

【复制 通道 命令 用 来 对 当前 通道 进行 复制 ， 鼎 一 一 一 
使 用 该 命令 复制 出 的 新 通道 是 Alpha 通道 。 在 图 4-6 【通道 ] 面 板 菜单 
【复制 通道 ] 对 话 框 中 可 以 设置 名 称 、 位 置 等 选 
项 ,车 勾 选 【[ 反 相 ] 复 选 框 ,新 复制 的 通道 是 当前 通道 的 反 相 效 果 , 也 就 是 说 它 的 黑 和 白 完全 
相反 。 

6) 删除 通道 

【删除 通道 3 命令 用 于 删除 多 余 的 通道 ,在 【通道 3 面板 中 选择 要 删除 的 通道 并 选择 该 命 
令 , 可 以 将 当前 被 选择 的 通道 删除 。 

7) 新 建 专 色 通 道 

使 用 [新 建 专 色 通道 命令 可 以 创建 一 个 新 的 颜色 通道 ,这 种 颜色 通道 只 能 在 图 像 中产 
生 一 种 颜色 ,所 以 也 称 专 色 通道 。 选 择 [ 新 建 专 色 通 道 ] 命 令 ,在 弹出 的 【新建 专 色 通 道 ] 对 话 
框 中 对 颜色 、 明 度 进行 设置 。 

8) 合并 专 色 通 道 

【合并 专 色 通道 3 命令 只 有 在 图 像 中 创建 了 新 的 专 色 通 道 后 才 可 用 ,图 像 中 颜色 通道 的 
数量 和 类 型 是 受 图 像 的 颜色 模式 控制 的 ,使 用 该 命令 可 以 将 新 的 专 色 通道 合并 到 图 像 默 认 
的 颜色 通道 中 。 

9) 设置 通道 选项 

【通道 选项 命令 只 有 在 选择 了 Alpha 通道 和 新 创建 的 专 色 通 道 时 才 起 作用 , 它 主要 用 
来 设置 Alpha 通道 和 专 色 通 道 的 选项 。 

10)【 分 离 通 道 

选择 [分离 通 道 ] 命 令 可 以 将 图 像 中 的 每 一 个 通道 分 离 为 一 个 单独 的 灰 度 图 像 。 

11) 合并 通道 

使 用 [合并 通道 命令 必须 满足 3 个 条 件 ,一 是 作为 通道 进行 合并 的 图 像 的 颜色 模式 必 
须 是 灰 度 的 ; 二 是 这 些 图 像 的 长 度 、 宽 度 和 分 辩 率 必须 完全 相同 ; 三 是 它们 必须 是 已 经 打 
开 的 。 选 择 [合并 通道 ] 命 令 ,在 【合并 通道 ] 对 话 框 中 对 模式 、 通 道 等 进行 设置 , 单 击 【确定 】 
按钮 完成 此 操作 。 
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.3 蒙 版 


在 实际 的 设计 工作 中 ,对 图 像 的 调整 .删除 等 操作 车 直接 作用 于 图 像 ,在 经 过 多 次 操作 
后 如 果 对 前 期 某 步 的 调整 不 满意 ,再 来 重新 调整 会 很 费事 ,对 于 这 种 情况 通常 使 用 蒙 版 功能 
避免 ,利用 蒙 版 可 以 在 不 破坏 图 像 的 前 提 下 对 图 像 进 行 灵活 编辑 。 


4.3.1 蒙 版 的 基本 操作 


在 图 像 中 ,图 层 蒙 版 的 作用 是 根据 蒙 版 中 颜色 的 变化 使 其 所 在 层 图 像 的 相应 位 置 产 生 
透明 效果 。 在 图 层 蒙 版 中 使 用 灰 度 颜色 ,其 中 ,当前 图 层 中 与 蒙 版 的 白色 部 分 相对 应 的 图 像 
不 产生 透明 效果 ,与 蒙 版 的 黑色 部 分 相对 应 的 图 像 完 全 透明 ,与 蒙 版 的 灰色 部 分 相对 应 的 图 
像 根 据 其 灰 度 产生 相同 程度 的 透明 效果 。 

(1) 单 击 图 层 缩 略图 , 当 缩 略图 以 白 边 显示 时 表示 当前 编辑 的 是 图 像 内 容 。 

(2) 单 击 图 层 蒙 版 缩 略 图 , 当 缩 略图 以 白 边 显示 时 表示 当前 编辑 的 是 蒙 版 内 容 。 


1. 创建 图 层 蒙 版 


在 图 像 中 建立 选区 , 单 击 【 图 层面 板 中 的 [添加 图 层 蒙 版 按钮 , 即 在 当前 图 层 上 创建 图 
层 蒙 版 ,默认 添加 的 图 层 蒙 版 显示 选区 内 的 图 像 。 
选中 图 层 , 单 击 【图 层面 板 中 的 【添加 图 层 蒙 版 3 按钮 , 即 添加 白色 蒙 版 。 


2. 停 用 /启用 图 层 蒙 版 


在 【图 层面 板 的 图 层 蒙 版 缩 览 图 上 右 击 ,在 弹出 的 快捷 菜单 中 选择 【 停 用 图 层 蒙 版 ] 命 
令 , 图 层 蒙 版 即 被 停 用 ,失去 作用 ,此 时 图 层 蒙 版 缩 览 图 上 将 出 现 一 个 红色 的 “ 关 ? 号 。 


3. 删除 图 层 蒙 版 


在 【图 层面 板 的 图 层 蒙 版 缩 览 图 上 右 击 , 在 弹出 的 快捷 菜单 中 选择 【删除 图 层 蒙 版 ] 命 
令 , 此 时 图 层 蒙 版 将 被 删除 , 原 图 像 不 受 影响 。 


4. 应 用 图 层 蒙 版 


在 【图 层面 板 的 图 层 蒙 版 缩 览 图 上 右 击 , 在 弹出 的 快捷 菜单 中 选择 [应 用 图 层 蒙 版 ] 命 
令 , 此 时 图 层 蒙 版 将 被 删除 , 原 图 像 只 保留 使 用 图 层 蒙 版 时 可 见 的 部 分 ,其 他 部 分 也 被 删除 。 


4.3.2 快速 蒙 版 


在 工具 箱 下 方 有 两 个 按钮 , 即 【 以 标准 模式 编辑 按钮 和 【以 快速 蒙 版 模式 编辑 ] 按 钮 。 
单 击 【以 标准 模式 编辑 了 按钮 ,使 用 正常 的 编辑 模式 ,此 时 所 进行 的 操作 对 当前 图 像 起 作用 ; 
单 击 【以 快速 蒙 版 模式 编辑 了 按钮 ,以 快速 蒙 版 的 方式 进行 编辑 ,此 时 所 进行 的 操作 对 图 像 本 
身 不 产生 作用 ,而 是 对 当前 在 图 像 中 产生 的 快速 蒙 版 进行 编辑 。 


第 4 章 “ Photoshop 图 层 、 通 道 和 蒙 版 77 


1. 快速 蒙 版 与 图 层 蒙 版 的 区 别 


使 用 图 层 蒙 版 需要 在 [通道] 面板 中 保存 蒙 版 , 它 的 主要 功能 是 根据 蒙 版 中 颜色 的 变化 
使 其 所 在 层 图 像 的 相应 位 置 产生 透明 效果 。 

在 使 用 快速 蒙 版 时 ,【 通 道 ] 面 板 中 会 出 现 一 个 临时 的 快速 蒙 版 通道 ,但 操作 结束 后 不 在 
【通道 3 面板 中 保存 该 蒙 版 ,而 是 直接 生成 选区 。 快 速 蒙 版 常 被 用 来 创建 各 种 特殊 选区 ,从 而 
制作 出 特别 的 图 像 效 果 。 

2. 使 用 快速 蒙 版 创建 选区 


使 用 快速 蒙 版 创建 选区 有 以 下 几 个 步骤 : 

(1) 打开 或 新 建 一 幅 图 像 。 

(2) 单 击 工具 箱 下 方 的 [以 快速 蒙 版 模式 编辑 了 按钮 ,进入 快速 蒙 版 编辑 状态 。 

(3) 利用 工具 箱 中 的 工具 编辑 快速 蒙 版 。 

(4) 单 击 工具 箱 中 的 【以 标准 模式 编辑 了 按钮 , 回 到 标准 编辑 模式 ,此 时 图 像 上 出 现 利用 
快速 蒙 版 创建 的 选区 ,下 面 进行 的 编辑 操作 将 重新 对 图 像 起 作用 。 


3. 设置 快速 蒙 版 选项 


双击 工具 箱 中 的 【以 快速 蒙 版 模式 编辑 了 按钮 ,弹出 [快速 蒙 版 选项 ] 对 话 框 。 

选择 [被 蒙 版 区 域 - 单 选 按钮 ,快速 蒙 版 中 不 显示 色彩 的 部 分 将 作为 最 终 的 选区 ; 选择 
【所 选区 域 单 选 按 钮 ,快速 蒙 版 中 显示 色彩 的 部 分 将 作为 最 终 的 选区 。 

【颜色 】 色 块 决定 了 快速 蒙 版 在 图 像 窗 口中 显示 的 色彩 ;【 不 透明 度 ] 值 决定 了 快速 蒙 版 
的 最 大 不 透明 效果 值 。 


4.4 综合 应 用 


4.4.1 按钮 的 制作 


按钮 的 制作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 ] 民 新 建 ] 命 令 ,新 建 一 个 500 像素 X400 像素 的 文件 ,背景 填 
充 颜 色 # 033706 ,效果 如 图 4-7 所 示 。 

(2) 新 建 一 个 图 层 , 选 择 矩 形 选 框 工 具 , 拖 出 一 个 288 像素 X50 像素 的 矩形 选区 ,填充 
颜色 #036208 ,效果 如 图 4-8 所 示 。 


图 4-7 新 建文 件 图 4-8 建立 矩形 选区 


78 。 Web 前 端 开 发 及 应 用 教程 


SMW 


(3) 选中 和 矩形 所 在 的 图 层 , 单 击 【 图 层面 板 中 的 【图 层 样 式 ] 按 钮 ,设置 内 阴影 和 渐变 释 
加 ,参数 分 别 如 图 4-9 和 图 4-10 所 示 。 


图 层 样式 Eq 
a Wi [|] 
Lo 一 二 
六 
口 简 面 和 洁 肤 混合 模式 (B): | 正常 ji 

口 等 高 厂 不 透明 度 (Q): ET 20 % Te 
口 多 理 ame: (De le 回信 全 Rt(@) 下 
-一 下 高 DG 一 一 [8 图 
阻塞 (CO): C= [0 I | 


口内 发 光 | 
大 Ja 壤 索 | 

口 江汉 33 @ | 

口 颜色 委 加 6 一 一 一 一 一 一 一 一 = 

二 和 [ml | 

和 Ld] 

下 
口外 发 光 杂 色 人 pe)% 
口 投 及 设置 为 默认 信 ] [复位 为 默认 信 


图 4-9 内 阴影 参数 设置 


渐变 要 加 

一 淹 变 

| “混合 模式 (O) 正 富 

| ; 新 建 样式 (WD). 
| mi 

| 


预览 (V) 


| 角度 (W: ( DD 区 们 
MG 一 [io0 | 
[设置 为 轩 认 值 ] [复位 为 陵 认 什 


图 4-10 渐变 一 加 参数 设置 


第 4 章 ”Photoshop 图 层 、 通 道 和 蒙 版 


(4) 选中 第 1 个 矩形 , 按 Ctrl 十 Alt 十 T 键 ,移动 第 2 个 矩形 至 目标 位 置 , 按 Enter 键 确 
认 。 然 后 按 Ctrl 十 Alt 十 Shift 十 T 键 ,等 距离 复制 出 两 个 按钮 ,效果 如 图 4-11 所 示 。 

(5) 选择 工具 箱 中 的 横 排 文字 工具 ,在 每 个 矩形 上 输入 菜单 文字 ,字体 为 “Arial” ,效果 
如 图 4-12 所 示 。 

(6) 单 击 【 图 层面 板 下 方 的 [新 建 图 层 ] 按 钮 ,新 建 一 个 图 层 , 然 后 选择 椭圆 选 框 工具 ， 
在 矩形 的 左边 拉 出 一 个 直径 为 30 像素 的 正 圆 选区 ,并 填充 颜色 为 #033706, 效 果 如 图 4-13 
所 示 。 


RE 
REGTF 
和 


CONTACT US CONTACT US 


图 4-11 复制 矩形 后 的 效果 图 4-12 添加 文字 效果 图 4-13 添加 正 圆 选区 


(7) 为 绿色 正 圆 加 上 图 层 样式 ,首先 选中 绿色 正 圆 所 在 的 图 层 , 单 击 [ 图 层面 板 下 方 的 
【图 层 样式 了 按钮 ,分 别 设置 内 发 光 、 渐 变 笃 加 、 描 边 , 参 数 设 置 如 图 4-14 一 图 4-16 所 示 。 


图 层 样式 


一 内 发 光 

站 构 

混合 模式 (8): | 正常 

不 昌明 0 一 一 一 | 
杂 色 人: (= [0 


©[L TOL ds] 


图 案 
方法 oj | 柔和 国 
温 :OO 居中 国 。 加 边 络 g@ 
用 才 (QO: “Ty [14 
大 Ho 国 | 


ws | 人] Osea 


范围 R): “Ty [50 
拓 动 DG 一 


图 4-14 内 发 光 参 数 设置 


(8) 加 上 图 层 样式 后 把 正 圆 的 图 层 不 透明 度 改 为 70% ,然后 在 上 面 加 上 箭头 ,效果 如 
图 4-17 所 示 。 
(9) 稍微 加 一 些 背景 颜色 ,完成 最 终 效 果 , 如 图 4-18 所 示 。 


四 


™ 
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图 4-15 渐变 得 加 参数 设置 


[设置 为 扶 认 值 _] [复位 为 黑 认 人 


4-16 ” 描 边 参 数 设置 


PHOTO 


CONTACT US 


图 4-17 修改 正 圆 选区 图 4-18 最终 效果 
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4.4.2 蒙 版 的 合成 


蒙 版 合成 的 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 了 代打 开 ] 命 令 , 打 开 * 素 材 1” 和 “素材 2” 两 张 素材 图 片 ,如 
图 4-19 所 示 。 

(2) 将 “素材 2” 拖 至 “素材 1 图 中 ,图 层面 板 如 图 4-20 所 示 。 


图 4-19 打开 素材 图 片 图 4-20 【图 层面 板 


(3) 单 击 图 层 缩 览 图 前 面 的 眼睛 图 标 , 隐 藏 图 层 1; 在 【通道 面板 中 的 任 一 单 色 通 道内 
按 住 Ctrl 键 单 击 通道 缩 略 图 ,将 选区 图 像 调 入 选区 ,如 图 4-21 所 示 。 


4-21 将 选区 图 像 调 人 选区 


(4) 返回 【图 层面 板 ,再 次 单 击 图 层 缩 览 图 前 面 的 眼睛 图 标 ,显示 图 层 1; 选中 图 层 1， 
单 击 【图 层面 板 下 方 的 【添加 蒙 版 3 按钮 ,为 图 层 1 添加 蒙 版 ,如 图 4-22 所 示 。 

(5) 单 击 【图 层面 板 下 方 的 【创建 新 图 层 ] 按 钮 ,建立 新 图 层 , 将 【前 /背景 色调 为 蓝 / 白 
色 , 在 渐变 填充 工具 中 选择 径 向 渐变 ,在 图 层 2 中 拖 动 ,添加 渐变 效果 ,如 图 4-23 所 示 。 
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虽 不 回 四 .外 加 人 言 
一 


图 4-22 为 图 层 1 添加 蒙 版 


| go.m 晤 
| 


图 4-23 ”建立 新 图 层 


(6) 将 图 层 2 移动 至 图 层 1 下 方 , 然 后 保存 ,最 终 效果 如 图 4-24 所 示 。 


图 4-24 最终 效 果 


第 4 章 Photoshop 


图 层 、 通 道 和 蒙 版 


4.4.3 艺术 相框 的 制作 
制作 艺术 相框 的 操作 步骤 如 下 : 


(1) 选择 菜单 栏 中 的 【文件 ] 民 新 建 ] 命 令 ,建立 一 个 图 形 文 件 ,参数 设置 如 图 4-25 所 示 。 


名 称 (N): [未 标题 -2 


厂 ” 预 设 (e):| 自 定 


宽度 (W): |400 


高 度 (H); |500| ] 


分 辩 素 (R): |72 


颜色 禹 式 (M): [区 度 


青 景 内 容 (C): 白色 


人 高 级 


颜色 卫 置 文件 (Q); | 工作 中 的 东 色 : Dot Gan 15% 靖 


便 素 长 宽 比 (X): | 方形 像 素 


回 


图 4-25 新建 文件 的 参数 设置 


(2) 打开 “素材 1 图片, 将 其 拖 入 刚才 建立 的 文件 中 ,并 调整 大 小 及 位 置 ,如 图 4-26 所 示 。 


(3) 选择 多 边 形 套 索 工具 ,绘制 特殊 形状 的 选区 ,然后 在 【通道 ] 面 板 下 方 单 击 【 将 选区 
存储 为 通道 3 按钮 ,把 选区 保存 起 来 ,并 取消 选区 ,如 图 4-27 所 示 。 


国 未 标题 -1@ 100% (图 层 1 RGB/8)* 


国 未 标题 -1@ 100% (图 层 1 RGB/8) * 


加 | 文档 :5859KJ716.8K |>| 


100% Bl 文档 :585.9K/896.5K > 


图 4-26 打开 素材 


图 4-27 制作 选区 
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(4) 选择 菜单 栏 中 的 【 滤 镜 了 民 滤 镜 库 了 民 画 笔 描 边 人工 喷 溅 了 命令 ,打开 【 喷 溅 】 对 话 框 ， 
设置 相应 参数 ,如 图 4-28 所 示 。 


喷 泪 (100%) 


平 请 度 G) 


深 色 宣 条 


图 4-28 ” 喷 溅 参数 设置 


(5) 在 [通道] 面板 下 方 单 击 【将 通道 作为 选区 载 入 按钮 ,得 到 不 规则 选区 ,然后 将 选区 
反选 ,并 按 Delete 键 删除 选中 部 分 的 图 像 ,如 图 4-29 所 示 。 


[ 国 未 标题-1@ 100% (图 屋 1 RGB/6) =[ol x 


图 4-29 将 选区 反选 
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(6) 为 图 层 1 添加 投影 样式 ,如 图 4-30 所 示 。 


图 4-30 投影 参数 设置 


(7) 选择 菜单 栏 中 的 【文件 了 民 保 存 ] 命 令 保存 文件 ,最 终 效 果 如 图 4-31 所 示 。 


国 未 标题 -1@ 100% (图 层 1 RGB/B) * 


100% 各] 文档 :585.9KJ896.5K » 本 


图 4-31 最 终 效果 


Photoshop 色 彩 衣 


本 章 学 习 目 标 : 

名 了 解 图 像 的 色彩 相关 知识 。 

局 掌握 图 像 的 编辑 操作 。 

局 掌握 图 像 的 色彩 调整 常用 命令 。 
名 掌握 Photoshop 中 滤 镜 的 应 用 。 


(6.1 图 像 的 编辑 


【编辑 菜单 中 的 命令 用 于 对 图 像 文 件 进行 纠正 、 修 改 及 剪贴 等 处 理 ,主要 包括 还 原 、 复 


制 、 粘 贴 ` 清 除 、 填 充 、 描 边 . 自 由 变换 .变换 .定义 图 案 及 清理 
等 命令 【编辑 菜单 如 图 5-1 所 示 。 


1. 还 原 操作 


【还 原 ] 命 令 主要 用 于 对 图 像 编辑 处 理 过 程 中 出 现 的 失误 
进行 复原 。 

在 [编辑 ] 菜 单 中 ,这 一 命令 的 名 称 经 常 显 示 为 “还 原 十 上 
一 步 操作 名 称 ”, 此 命令 的 主要 功能 是 将 图 像 文件 恢复 到 最 后 
一 次 操作 前 的 状态 ,执行 该 命令 后 , 它 变 成 * 重 做 十 上 一 步 操 
作 名 称 ” 命 令 , 其 快捷 键 为 Ctrl 十 Z。 

选择 [前 进一步 命令 , 当 图 像 中 有 被 撤销 的 操作 时 ,向 前 
重 做 一 步 操作 ,其 快捷 键 为 Shift 十 Ctrl 十 Z。 

选择 【后 退 一 步 ] 命 令 , 向 后 撤销 一 步 操作 ,其 快捷 键 为 
Alt 十 Ctrl 十 Z。 


2. 图 像 的 复制 


图 像 的 复制 与 粘贴 命令 主要 包括 [ 剪 切 】)【 拷 贝 ].【 合 并 
拷贝 ]【 粘 贴 ] 等 ,这 些 命令 在 实际 工作 中 的 使 用 非常 频繁 ,而 
且 经 常 配 合 使 用 ,其 中 [ 剪 切 ]【 拷 贝 ] 和 [粘贴] 命令 的 功能 比 
较 明确 ,这 里 不 做 介绍 ,下 面 只 简单 介绍 [合并 拷贝 ] 和 [ 贴 入 】 


前 


定义 画笔 
定义 图 案 
定义 自 定形 状 

清理 @) sd 

Adobe FDF 预 设 

远程 连接 
颜色 设置 (6)， 
指定 配置 文件 
转换 为 配置 文 | 


Shi fttCtrlHK 


件 0) 


ALttShiEttCtrltk 
有 ttShi ftfCtrl4 


键盘 快捷 键 ， 
菜单 0 


图 5-1 【编辑 菜单 
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命令 的 功能 。 

【合并 拷贝 ] 命 令 主要 用 于 图 层 文件 ,用 于 将 所 有 图 层 中 的 内 容 复 制 到 剪贴 板 中 ,在 进行 
粘贴 时 ,将 其 合并 到 一 个 图 层 粘贴 。 

【 贴 和 人 命令 在 【选择 性 粘贴 3 命令 下 ,在 使 用 该 命令 时 ,当前 图 像 文 件 中 必须 有 选区 ,可 
将 剪贴 板 中 的 内 容 粘 贴 到 当前 图 像 文件 中 ,并 将 选区 设置 为 图 层 蒙 版 。 


3. 图 像 的 填充 与 描 边 


使 用 [编辑 了 代 填充 命令 可 以 将 选 定 的 内 容 按 指定 的 模式 填 人 图 像 的 选区 内 或 直接 
将 其 填 入 图 层 内 ,使 用 [编辑 I【 描 边 ] 命 令 可 以 用 前 景色 沿 选区 边缘 描绘 指定 宽度 的 
线条 。 


4. 图 像 的 变换 


图 像 的 变换 命令 在 实际 工作 过 程 中 经 常 运用 ,用 户 熟 练 地 掌握 此 类 命令 ,可 以 绘制 较 强 
的 图 像 效 果 。 

。【 自 由 变换 命令 : 在 自由 变换 状态 下 ,以 手动 方式 将 当前 图 层 的 图 像 或 选区 做 任意 
缩放 、 旋 转 等 自由 变形 操作 。 这 一 命令 用 在 路 径 上 时 会 变 为 【自由 变换 路 径 ] 命 令 ， 
对 路 径 进行 自由 变换 。 

“【 变 换 了 命令 : 主要 包括 【缩放 了 工 旋 转 】 工 斜 切 ] 民 扭曲】 工 透 视 】 工 变形 】 工 旋转 180 
度 3【 旋 转 90 度 ( 逆 时 针 )】 【旋转 90 度 ( 顺 时 针 )] 习 水平 翻 转 】 及 【垂直 翻转 3 等 命 
令 , 用 户 可 以 根据 不 同 的 需要 选择 不 同 的 命令 ,对 图 像 或 选区 进行 变换 调整 。 这 一 
命令 用 在 路 径 上 时 会 变 为 【变换 路 径 ] 命 令 , 用 于 对 路 径 进行 变换 。 

5. 调整 图 像 大 小 

在 Photoshop 中 可 以 利用 [图 像 】I[ 图 像 大 小 命令 重新 设 定 图 像 文 件 的 尺寸 大 小 和 分 

选择 要 调整 的 图 像 ,然后 选择 【图 像 】I[【 图 像 大 小 ] 命 令 , 打 开 【 图 像 大 小 ] 对 话 框 进行 

设置 。 


【像素 大 小 ] 类 参数 和 [文档 大 小 ] 类 参数 主要 用 于 设置 修改 后 图 像 的 大 小 ,这 两 组 参 
数 只 要 修改 其 中 的 一 组 , 另 一 组 就 会 随 之 发 生 相 应 的 变化 。 

如 果 图 像 带 有 应 用 了 样式 的 效果 层 ,那么 勾 选 【缩放 样式 ] 复 选 框 可 以 在 缩放 图 像 的 
同时 缩放 样式 效果 。【 缩 放样 式 〗 选 项 只 有 在 勾 选 了 【约束 比例 ] 复 选 框 时 才能 使 用 。 
。 勾 选 [ 约 束 比 例 ] 复 选 框 ,可 以 对 图 像 进 行 等 比例 缩放 。 

勾 选 【 重 定 图 像 像 素 ] 复 选 框 ,可 以 在 其 下 拉 列 表 中 选择 修改 图 像 大 小 时 使 用 的 插值 
方法 。 


6. 调整 画布 大 小 


利用 【图像 I【 画 布 大 小 3 命令 可 以 重新 设 定 图 像 版 面 的 尺寸 大 小 ,并 可 以 调整 图 像 在 版 
面 上 的 位 置 。 
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7. 旋转 画布 

利用 [图像 3 民 旋转 画布 3 命令 可 以 调整 图 像 版 面 的 角度 ,并 且 文件 中 的 所 有 图 层 、 通 道 
以 及 路 径 会 一 起 旋转 。 
[5.2 颜色 的 调整 

选择 [图 像 ] 民 调整 】 命 令 ,系统 将 弹出 如 图 5-2 所 示 的 级 联 菜单 ,该 命令 比较 重要 , 主要 
用 于 调整 图 像 的 色调 亮度 对比度 以 及 饱和 度 等 ,利用 它 能 够 调 出 漂亮 的 色彩 画面 效果 。 


图 层 () 文字 QD 选择 (5) 滤 樟 (DD 视图 CO) 窗口 (W) 帮助 ( 
Hi > 


自动 矶 色 0) Shi fttCtrl+8 


图 像 大 小 I) ALttCtrltI 


Ctrl#y 
ALUHCtrltC 


Shi fttCtrlHU 


图 5-2 【调整 3 菜单 


1.【 色 阶 ] 命 令 


【 色 阶 3 命令 主要 用 来 调整 各 通道 的 明暗 数量 。 选 择 [ 色 阶 ] 命 令 , 在 弹出 的 [ 色 阶 〗 对 话 
框 中 对 参数 进行 设置 ,如 图 5-3 所 示 。 

【通道 】: 在 此 下 拉 列 表 中 选择 要 调整 的 通道 。 

*【 输 入 色 阶 ] 值 和 [ 色 阶 ] 对 话 框 中 间 的 【 色 阶 直方 图 是 相对 应 的 ,调整 [输入 色 阶 ] 值 
或 移动 滑 块 的 位 置 可 以 修改 图 像 中 的 明暗 数量 及 图 像 对 比 度 。 
【 色 阶 直方 图 中 最 左 侧 的 黑色 滑 块 代表 当前 图 像 的 最 暗 值 ,移动 该 滑 块 时 ,其 左 侧 
的 亮度 级 全 部 修改 为 原 图 像 中 的 最 暗 值 ;【 色 阶 ] 直 方 图 最 右 侧 的 白色 滑 块 代表 当 
前 图 像 中 的 最 亮 值 ,移动 该 滑 块 时 ,其 右 侧 的 亮度 级 全 部 修改 为 原 图 像 中 的 最 亮 值 ; 
【 色 阶 直方 图 中 左 侧 滑 块 至 右 侧 滑 块 的 间距 就 是 颜色 由 最 暗 过 渡 到 最 亮 的 过 程 ,中 
间 的 灰色 滑 块 表示 当前 图 像 的 中 间 亮 度 值 ;【 色 阶 ) 直 方 图 中 的 高 度 表示 图 像 中 每 个 
亮度 级 的 数量 。 直 方 图 下 方 有 3 个 滑 块 , 当 滑 块 向 左 滑动 时 增加 图 像 中 暗 调 的 数量 ， 
向 右 滑 动 时 增加 图 像 中 亮 调 的 数量 ,3 个 滑 块 间 的 距离 越 小 ,图 像 的 对 比 度 越 大 。 
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WW 


预 设 (E): [时 以 全 国志 


通道 (C):; | RGB 加 


回 预 站) 


图 5-3 【 色 阶 3 对 话 框 


*【 输 出 色 阶 3 值 和 [ 色 阶 〗 对 话 框 最 下 方 的 【 色 阶 色 带 是 相对 应 的 ,调整 [输出 色 阶 ] 值 
和 [ 色 阶 ] 色 带 的 滑 块 可 以 调整 整个 图 像 的 亮度 和 对 比 度 。【 色 阶 ] 色 带 左 侧 的 黑色 
滑 块 表示 图 像 的 最 暗 值 , 右 侧 的 无 色 滑 块 表示 图 像 中 的 最 亮 值 。 滑 块 间 的 距离 越 
小 ,图 像 的 对 比 度 越 小 。 


2.【 自 然 饱 和 度 ] 命 令 


【自然 饱和 度 了 命令 的 功能 和 【色相 /饱和 度 】 命 令 类 似 , 可 以 使 图 片 更 加 鲜艳 或 暗淡 ,但 
效果 更 加 细腻 ,会 智能 地 处 理 图像 中 不 够 人 饱和 的 癌 
分 和 和 忽略 足够 饱和 的 颜色 。 在 使 用 【自然 饱和 度 ] 调 
整 图 像 时 会 自动 保护 图 像 中 已 饱和 的 部 位 ,只 对 其 
做 小 部 分 的 调整 ,而 着 重 调整 不 饱和 的 部 位 ,这 样 会 Do_ |] gm) 
使 Photoshop CS6 图 像 整 体 的 饱和 趋 于 正常 .【[ 自 | ” 

然 饱 和 度 】 对 话 框 如 图 5-4 所 示 。 
。【 自 然 饱 和 度 】: 主要 针对 图 像 中 饱和 度 过 低 
的 区 域 增加 饱和 度 。 
。【 饱 和 度 】: 对 色彩 的 饱和 度 起 主要 作用 。 


3.【 颜 色 查 找 ] 命 令 


图 5-4 【自然 饱和 度 ] 对 话 框 


【颜色 查找 3 命令 是 Photoshop CS6 中 文 版 新 增 的 功能 ,主要 作用 是 对 Photoshop CS6 
图 像 色 彩 进行 校正 ,校正 的 方法 有 【3DLUT 文件 ]( 三 维 颜色 查找 表 文 件 ,精确 校正 图 像 色 
彩 )【 摘 要 】【 设 备 链接 ,并且 可 以 打造 一 些 特殊 图 像 效 果 , 其 对 话 框 如 图 5-5 所 示 。 
。【3DLUT 文件 】: 右 侧 的 预 设 下 拉 列 表 中 显示 预 设 效果 。 
。【 摘 要 】: 选择 该 单 选 按钮 时 会 弹出 【 载 和 人 】 对 话 框 ,用 来 载 和 人 需要 载 入 的 色彩 文件 或 
者 在 【摘要 了 右 侧 的 预 设 下 拉 列 表 中 选择 一 种 预 设 效果 。 
。【 设 备 链接 】: 在 右 侧 的 预 设 下 拉 列 表 中 选择 相应 的 预 设 效果 。 
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SMW 


融入 30 DT 
壹 入 搞 要 配置 文件 . 
载 入 设备 链接 配置 文件 . 


回 预 响 () 


图 5-5 颜色 查找 对 话 框 


4.【HDR 色调 命令 


Photoshop CS6 新 增 的 [HDR 色调 ] 命 令 可 用 来 修补 太 亮 或 太 暗 的 图 像 ,制作 出 高 动态 
范围 的 Photoshop CS6 图 像 效 果 , 其 对 话 框 如 图 5-6 所 示 。 


ER 辐 = CE 
取消 
回 预 Ke) 


方法 :| 局 部 适应 加 


图 5-6 【HDR 色调 ] 对 话 框 


“【 预 设 〗: 系统 默认 设置 的 预 设 值 。 

。*“【 方 法 】: 选择 系统 中 设置 的 方法 。 

*。【 半 径 】: 控制 发 光 效果 的 大 小 。 

“ 【强度 〗: 控制 发 光 效 果 的 对 比 度 。 

。【 平 滑 边 缘 】: 提升 细节 时 启用 边缘 保留 平滑 。 
。*【 灰 度 系数 】: 调整 高 光 和 阴影 之 间 的 差异 。 
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“【 曝 光度 〗: 调整 图 像 的 整体 色调 。 
“【 细 节 】: 查找 图 像 细 节 。 

。“【 阴 影 】: 调整 阴影 区 域 的 明亮 度 。 
。【【 高 光 】: 调整 高 光 区 域 的 明亮 度 。 


5.【 曲 线 ] 命 令 


使 用 [曲线 ] 命 令 可 以 利用 曲线 调整 图 像 各 通道 的 明暗 数量 。 选 择 【图 像 】I【 调 整 】I【 曲 
线 】 命 令 ,在 弹出 的 [曲线 了 对 话 框 中 进行 相应 设置 ,如 图 5-7 所 示 。 


预 设 (R); | 默认 什 


通道 (C0); | RGB 


dl 


a 
风口 显示 修 葛 (W) 


图 5-7 【曲线 了 对 话 框 


水 平 轴 表 示 像 素 原来 的 亮度 值 (输入 值 ) ,垂直 轴 表 示 新 的 亮度 值 (输出 值 ) 。 

在 曲线 上 单 击 可 创建 调节 点 , 拖 忠 调节 点 即 可 调整 图 像 中 明暗 的 数量 ,由 左下 至 右 
上 为 由 上 暗 至 亮 。 

如 果 要 删除 调节 点 ,只 要 选择 该 调节 点 ,再 按 Delete 键 ,或 直接 拖 电 该 调节 点 离开 
曲线 。 

单 击 [ 有 曲线} 对话 框 中 的 铅笔 按钮 ,可 以 通过 直接 在 [曲线 】 对 话 框 中 绘制 曲线 来 调整 
图 像 亮度 。 

。 在 【显示 数量 选项 中 选择 光线 总 量 或 墨水 总 量 。 

。 在 【显示 选项 中 选择 是 否 显示 通道 ,直方 图 .基线 及 交叉 线 等 信息 。 


6.【 色 彩 平衡 ] 命 令 


【色彩 平衡 ] 命 令 主要 用 于 更 改 图 像 的 整体 颜色 ,可 以 通过 在 彩色 图 像 中 改变 颜色 的 混 
合 比例 来 进行 整 图 的 色彩 校正 。 选 择 【 图 像 】3 民 调整 了 民 色 彩 平衡 命令 ,在 弹出 的 [色彩 平 
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衡 ] 对 话 框 进行 相应 设置 ,如 图 5-8 所 示 。 

。 在 【色彩 平衡 ] 类 参数 下 拖 忠 三 角形 滑 块 可 以 调整 要 在 图 像 中 增加 或 减少 颜色 。 
在 【色调 平衡 ] 类 下 选择 [阴影] 【中间 调 ] 或 【高光 ] 单 选 按钮 ,可 以 设置 色彩 校正 对 
图 像 的 哪 一 部 分 起 作用 。 
【保持 亮度 】: 在 对 RGB 图 像 进行 操作 时 应 勾 选 该 复 选 框 ,以 防止 在 更 改 颜色 时 更 
改 了 图 像 中 的 亮度 值 ,此 复 选 框 可 保持 图 像 中 的 色调 平衡 。 


7.【 亮 度 / 对 比 度 ] 命 令 
使 用 [亮度 /对 比 度 了 命令 可 以 调整 图 像 的 亮度 和 对 比 度 , 其 对 话 框 如 图 5-9 所 示 。 


亮度 /对 比 度 


全 名 中 间 调 (0) 加 高 光 (H) 


[as 口 信用 版 () me) 
图 5-8 【色彩 平衡 ] 对 话 框 图 5-9 【亮度 /对 比 度 ] 对 话 框 
8.【 黑 白 ] 命 令 


使 用 黑白 了 命令 可 以 调整 6 种 不 同 颜色 ( 红 、 黄 \ 绿 、 青 、 蓝 、 洋 红 ) 的 亮度 值 ,从 而 制作 出 
高 质量 的 黑白 照片 ,还 可 以 制作 出 各 种 不 同 颜色 的 单 色 照片 ,其 对 话 框 如 图 5-10 所 示 。 


图 5-10 【黑白 ] 对 话 框 
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。*【 预 设 】: 可 以 在 此 下 拉 列 表 中 选择 不 同 的 预 置 方案 ,还 可 以 自 定 义 不 同 颜色 的 
色 值 。 
。【 色 调 】: 勾 选 该 复 选 框 ,可 以 分 别 调整 色相 和 饱和 度 。 
9.【 色 相 / 饱 和 度 ] 命 令 
【色相 /饱和 度 ] 命 令 主要 用 于 调整 图 像 中 单个 颜色 成 分 的 色相 、 饱 和 度 和 明度 。 选 择 菜 
单 栏 中 的 【图 像 】 民 调整 3 民 色 相 /饱和 度 】 命 令 ,在 弹出 的 对 话 框 中 进行 相应 设置 ,如 图 5-11 
所 示 。 


5: 口 着 色 () 
> 现 %(e) 


图 5-11 【色相 /饱和 度 ] 对 话 框 


【编辑 】: 在 此 下 拉 列 表 中 选择 【全 图 】 选 项 ,可 以 调整 图 像 的 色调 ,饱和 度 和 亮度 , 男 
外 还 可 以 在 此 下 拉 列 表 中 选择 其 他 特定 颜色 。 

【色相 ] 值 决定 调整 的 颜色 。 

调整 【饱和 度 ] 和 【明度 ] 值 或 移动 相应 的 滑 块 可 以 调整 图 像 或 选 定 颜色 的 饱和 度 和 
【色相 /饱和 度 ] 对 话 框 的 最 下 方 有 两 条 色 带 ,在 调整 图 像 色调 时 ,上 面 的 色 带 颜 色 显 
示 调 整 前 的 像素 颜色 ,下 面 的 色 带 颜 色 将 置换 与 上 面色 带 对 应 的 颜色 。 

【着 色 】: 匀 选 该 复 选 框 ,可 以 使 用 同一 种 颜色 置换 原 图 中 的 颜色 。 


10.【 去 色 ] 命 令 

使 用 去 色 ] 命 令 可 以 丢弃 图 像 色 彩 , 使 图 像 以 灰色 显示 。 但 使 用 去 色 ] 命 令 只 是 将 图 
像 中 原 有 的 色彩 丢弃 ,并 不 是 将 图 像 的 颜色 模式 修改 为 灰 度 模式 。 

11.【 匹 配 颜色 命令 

使 用 [匹配 颜色 3 命令 可 以 将 两 个 图 像 或 同一 图 像 中 两 个 图 层 的 颜色 和 亮度 相 匹配 ,使 
其 颜色 和 亮度 协调 一 致 。 其 中 需要 改变 颜色 和 亮度 的 图 像 称 为 “目标 图 像 ”, 需 要 采样 的 图 
像 称 为 “ 源 图 像 ”, 其 对 话 框 如 图 5-12 所 示 。 
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目标 图 像 


目标 : e7938706efd117f6-d20...(RGB/8) 


口中 和 必 ) 


图 像 统计 
使用 二 过 区 计算 靖 色 (8) 


启用 目标 选区 计算 调整 (T) 


图 5-12 【匹配 颜色 ] 对 话 框 


12.【 替 换 颜 色 】 命 令 


使 用 [ 苦 换 颜色 命令 可 以 修改 图 像 中 特定 的 颜色 。 当 图 像 窗 口中 存在 图 像 文 件 时 ,选择 
【图 像 3 民 调整 3 民 蔡 换 颜色 命令 ,在 弹出 的 对 话 框 中 对 颜色 进行 吸取 (可 进行 选区 的 加 减 ) ,设置 


容 差 ,调整 色相 ,饱和 度 、 明 度 等 值 ,将 吸取 的 颜色 用 新 
颜色 蔡 换 。【 蔡 换 颜 色 了 对 话 框 如 图 5-13 所 示 。 


13.【 可 选 颜色 命令 


使 用 [可 选 颜色 】 命 令 可 以 对 指定 的 颜色 进行 精 
细 调 整 ,以 校正 不 平衡 问题 。 使 用 [可 选 颜色 命令 
校正 颜色 是 使 用 高 档 扫 描 仪 和 分 色 程 序 时 的 一 个 技 
巧 ,可 在 图 像 中 的 每 个 加 色 ( 或 减 色 ) 的 原色 成 分 中 
增加 (或 减少 ) 印 刷 颜色 的 量 。 
选择 [图 像 】I【 调 整 3】I【 可 选 颜色 命令 ,在 弹出 
的 对 话 框 中 设置 参数 ,如 图 5-14 所 示 。 
。【 颜 色 】: 在 此 下 拉 列 表 中 选择 要 调整 的 颜 
色 , 通 过 调整 【青色 】、【 洋 红 】 【黄色 3】 和 【 黑 
色 ] 值 可 以 修改 指定 的 颜色 。 
。 选择 [相对 了 单 选 按钮 ,可 以 按照 总 量 的 百分比 
更 改 现 有 青色 洋红、 黄色 或 黑色 的 量 。 选 择 
该 单 选 按钮 不 能 调整 纯 白 色 或 纯 黑 色 。 


选区 


口 本 地 化 预 色 获 (2Z) 


加 正 过 一 


载 入 ()， 


EZ 


加 预览) 


图 5-13 【替换 颜色 】 对 话 框 
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。 选择 [绝对 了 单 选 按钮 , 则 按 绝 对 值 调整 颜色 。 例 如 ,如 果 从 50% 的 洋红 的 像素 开始 ， 
然后 添加 10%, 则 洋红 会 设置 为 60% 。 


预 设 (E); [默认 值 ” 国 < CE 


RE 取消 
丽 &(O): | 国 红 色 图 - 
于 | De) 


-一 一 一 一 一 一 一 
黄色 (Y); % 
OO 


黑色 (B); 
一 


方法 ; 加 相对 () ” 〇 绝对 (A) 


图 5-14 【可 选 颜色 ] 对 话 框 图 5-15 【通道 混和 器 对话 框 


14.【 通 道 混和 器 命令 


【通道 混和 器 命令 是 使 用 当前 颜色 通道 的 混合 来 修改 颜色 通道 ,从 而 达到 改变 图 像 颜 
色 的 目的 。 
选择 [图像 3 区 调 整 3 人 通道 混和 器 命令 ,将 弹出 【通道 混和 器 3 对话 框 ,其 中 的 内 容 会 根 
据 图 像 模 式 的 不 同 而 产生 相应 的 变化 ,这 里 以 RGB 图 像 为 例 必 通道 混和 器 对话 框 如 图 5-15 
所 示 。 
。【 输 出 通道 】: 在 此 下 拉 列 表 中 选择 要 进行 调整 的 通道 。 
。 在 【 源 通道 J 下 移动 滑 块 ,可 以 调整 源 通 道 在 输出 通道 中 所 占 的 百分比 。 
。 修改 [常数 ] 值 可 以 将 一 个 不 同 透 明度 的 通道 添加 到 输出 通道 中 , 负 值 作为 黑色 通 
道 , 正 值 作为 白色 通道 。 
。【 单 色 ] 复 选 框 : 勾 选 该 复 选 框 ,对 所 有 输出 通道 应 用 相同 的 设置 ,此 时 创建 仅 包含 
灰色 值 的 彩色 图 像 。 


15.【 渐 变 映射 ] 命 令 


利用 【渐变 映射 了 命令 可 以 使 用 指定 的 渐变 填充 颜色 在 图 像 中 按 图 像 藉 度 级 由 暗 至 
亮 取 代 原 图 的 颜色 。 选 择 【 图 像 】 代 调整 了 人民 渐变 映射 3 命令 .将 弹出 图 5-16 所 示 的 对 
。 单 击 [ 灰 度 映射 所 用 的 渐变 了 颜色 条 ,可 以 在 弹出 的 [渐变 编辑 器 〗 对 话 框 中 选择 并 编 
辑 要 使 用 的 渐变 项 ,如 果 所 选择 的 渐变 中 有 透明 效果 , 则 透明 不 起 作用 。 
。“【 仿 色 】: 勾 选 该 复 选 框 ,可 以 使 渐变 过 渡 更 加 均匀 。 
。“【 反 向 】: 勾 选 该 复 选 框 ,将 反 转 过 渡 项 中 的 颜色 顺序 。 
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图 5-16 【渐变 映射 ] 对 话 杠 图 5-17 【照片 滤 镜 ] 对 话 框 


16.【 照 片 滤 镜 】 命 令 


【照片 滤 镜 了 命令 模拟 在 相机 镜头 前 面 加 彩色 滤 镜 ,以 便 调 整 通过 镜头 传输 的 光 的 色彩 
平衡 和 色温 ,使 胶片 曝光 。 选 择 [ 图 像 3 民 调整 3 区 照 片 滤 镜 了 命令 ,弹出 【照片 滤 镜 对 话 框 ， 
如 图 5-17 所 示 。 
。 在 【 滤 镜 】 下 拉 列 表 中 可 以 选择 Photoshop 提供 的 预 设 滤 镜 效果 。 
。 选择 【颜色 了 单 选 按钮 , 单 击 其 右 侧 的 色 块 ,可 以 在 弹出 的 【失色 器 对 话 框 中 设置 滤 
镜 的 颜色 。 

。【 浓 度 ] 值 决定 应 用 的 颜色 对 图 像 的 影响 程度 。 此 值 越 大 , 滤 镜 颜色 对 图 像 的 影响 就 
越 大 。 

。【 保 留 明度 】: 勾 选 该 复 选 框 , 则 滤 镜 颜色 不 影响 图 像 的 亮度 。 

17.【 阴 影 /高 光 ] 命 令 


【 明 影 /高 光 ] 命 令 不 是 简单 地 使 图 像 变 暗 
或 变 亮 ,而 是 基于 暗 调 或 高 光 中 的 周围 像素 (局 | 一 电 » 
部 相 邻 像素 ) 增 亮 或 变 暗 。 该 命令 允许 分 别 控 | | 嗓 全 
制 暗 调和 高 光 , 适 合用 于 校正 由 强 逆光 而 形成 
阴影 的 照片 ,或 者 校正 由 于 太 接 近 相 机 闪光 灯 
而 有 些 发 白 的 焦点 。【 阴 影 /高 光 ] 命 令 的 默认 
值 被 设置 为 修复 具有 逆光 问题 的 图 像 。 

选择 [图 像 3 民 调整 3 区 阴影 /高 光 ] 命 令 , 弹 
出 [阴影 /高 光 ] 对 话 框 ,如 图 5-18 所 示 。 

。【 数 量 ] 值 决定 调整 光照 的 校正 量 。 此 
值 越 大 ,为 图 像 中 的 暗 调 提供 的 增 亮 程 
度 或 者 为 高 光 提供 的 变 暗 程度 越 大 。 
【色调 宽度 ] 值 控制 暗 调 或 高 光 中 色调 
的 修改 范围 。 此 值 较 小 时 ,只 对 图 像 中 
的 较 暗 或 较 亮 区 域 进 行 校 正 调整 ; 此 
值 越 大 ,包括 的 色调 调整 区 域 越 多 。 | Bee): 
【半径 ] 值 决定 每 个 像素 周围 多 大 的 范围 | CE 
内 的 像素 作为 "周围 像素 ", 再 根据 “周围 “| 也 本 
像素 ”决定 当前 像素 属于 暗 调 还 是 高 光 。 图 5-18 【阴影 /高 光 ] 对 话 框 
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。【 颜 色 校正 值 主要 用 于 在 图 像 已 更 改 明暗 的 区 域 中 微调 颜色 ,此 调整 仅 适用 于 彩色 
图 像 。 通 常 此 值 越 大 ,生成 的 颜色 越 饱 和 ; 此 值 越 小 ,生成 的 颜色 越 不 饱和 。 

。【 中 间 调 对 比 度 ] 值 主要 用 于 调整 图 像 中 间 调 的 对 比 度 。“ 中 间 调 ”是 指 图 像 中 除 明 
暗色 调 以 外 的 中 间 色 调 。 

*。【 修 剪 黑色 ] 和 【修剪 白色 】 值 决定 会 将 图 像 中 多 少 比例 的 两 端 阶 调 ( 即 极端 阴影 ( 色 
阶 为 “0”) 和 极端 高 光 ( 色 阶 为 “255”)) 舍 弃 掉 ,并 将 剩余 部 分 的 阶 调 拉 开 至 “0 一 
255”, 从 而 加 大 图 像 的 对 比 度 。 此 值 越 大 ,生成 的 图 像 的 对 比 度 越 大 。 注 意 不 要 将 
此 值 设置 得 太 大 ,否则 会 减 小 阴影 或 高 光 的 细节 。 


18.【 了 曝光 度 ] 命 令 


使 用 [曝光 度 ] 命 令 可 以 调整 HDR(32 位 ) 图 像 的 色调 ,也 可 以 调整 8 位 和 16 位 图 像 的 
色调 。 曝 光度 是 通过 在 线性 颜色 空间 ( 灰 度 系数 为 1.0) 而 不 是 在 图 像 的 当前 颜色 空间 执行 
计算 得 到 的 。 选 择 [图像 3 民 调整 了 民品 光度 了 命令 ,将 弹出 【曝光 度 ] 对 话 框 。 

19.【 反 相 ] 命 令 


使 用 [ 反 相 ] 命 令 可 以 得 到 图 像 的 反 相 效 果 , 即 图 像 中 的 颜色 和 亮度 全 部 反 转 ,转换 为 
256 级 中 相反 的 值 。 例 如 ,如 果 原 像素 颜色 的 R、G、B 值 分 别 为 *200”“50”、“30”, 那 么 反 转 
后 它 的 RG、B 值 分 别 为 “55”、“205”、“225”; 如 果 原 图 像 像素 的 亮度 级 为 "100”, 那 么 反 转 
后 该 像素 的 亮度 级 为 "155”。 

20.【 色 调 均 化 ] 命 令 


Photoshop 软件 将 每 个 通道 中 最 亮 和 最 暗 的 像素 定义 为 白色 和 黑色 ,然后 按 比 例 重新 
分 配 中 间 像 素 值 ,使 图 像 中 的 明暗 分 布 均匀 。 


21.【 阅 值 ] 命 令 
使 用 [ 阅 值 命令 可 以 将 一 个 灰 度 或 彩色 图 像 转换 为 高 对 比 度 的 黑白 图 像 。 此 命令 是 将 
- 定 的 色 阶 指定 为 阅 值 ,所 有 比 该 国 值 亮 的 像素 会 被 转换 为 白色 ,所 有 比 该 阅 值 暗 的 像素 会 

被 转换 为 黑色 。【 阔 值 ] 对 话 框 如 图 5-19 所 示 。 

22.【 色 调 分 离 】 命 令 

使 用 [色调 分 离 ] 命 令 可 以 由 用 户 指定 图 像 中 每 个 通道 的 色调 级 (或 亮度 值 ) 的 数目 ,并 
将 图 像 像 素 映射 到 最 接近 的 匹配 色调 上 。 例 如 ,将 RGB 图 像 中 的 通道 设置 为 只 有 两 个 色 
调 , 那 么 图 像 只 能 产生 6 种 颜色 , 即 两 种 红色 \ 两 种 绿色 和 两 种 蓝 色 ,其 对 话 框 如 图 5-20 所 示 。 


辐 值 色 阶 (T): [EE ] 


图 5-19 【 阔 值 ] 对 话 框 图 5-20 【色调 分 离 ] 对 话 框 
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23.【 变 化 了 命令 


使 用 [变化 命令 能 可 视 地 调整 图 像 或 选区 的 色彩 平衡 对比度 .亮度 和 饱和 度 , 此 命令 
对 于 不 需要 精确 调整 色彩 的 平均 色调 图 像 最 有 用 ,但 该 命令 不 能 用 在 索引 颜色 图 像 上 。 选 
择 【[ 图 像 ] 民 调整 3 民 变 化 命令 ,弹出 【变化 ] 对 话 框 , 如 图 5-21 所 示 。 


图 5-21 【变化 ] 对 话 框 


【原稿 ] 缩 览 图 显示 原始 图 像 的 效果 ,当前 挑选 ] 缩 览 图 显示 调整 后 的 图 像 效 果 。 
选择 [阴影 【中 间 调 ] 或 [高 光 ] 单 选 按钮 可 以 调整 图 像 的 暗 区 、 中 间 区 域 或 亮 区 , 选 
择 [ 人 饱和 度 了 单 选 按钮 可 以 更 改 图 像 中 的 色相 数 。 

【精细 /粗糙 3 滑 块 可 以 设 定 每 次 调整 的 程度 。 

【变化 ] 对 话 框 左下 方 的 7 个 加 色 缩 览 图 显示 当前 图 像 增加 某 色 后 的 效果 , 单 击 【 变 
化 3 对 话 框 右 下 方 的 3 个 缩 览 图 可 以 调整 图 像 的 亮度 。 
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6.3 小 镜 


Photoshop 中 的 滤 镜 大 体 可 以 分 为 两 组 ,第 一 组 滤 镜 较 复杂 ,在 对 话 框 中 可 以 通过 综合 
使 用 设置 参数 和 选项 ,使 用 命令 按钮 及 鼠标 等 产生 特殊 效果 的 图 像 , 被 称 为 高 级 滤 镜 ,这 组 
滤 镜 包括 [转换 为 智能 滤 镜 ] 命 令 【 滤 镜 库 ] 命 令 【 液 化 ] 命 令 【 自 适应 广角 ] 命 令 【 镜 头 校 
正 了 命令 工 油画 了 命令 和 【消失 点 了 命令 ; 第 二 组 滤 镜 是 Photoshop 的 传统 滤 镜 ,也 被 称 为 标 
准 滤 镜 ,又 分 12 大 类 ,包括 [像素 化 ] 滤 镜 【 扭 曲 ] 滤 镜 【 杂 色 】 滤 镜 【 模 糊 】 滤 镜 【 面 笔 描 
边 ] 滤 镜 【 素 描 ] 滤 镜 【 纹 理 ] 滤 镜 【 艺 术 效果 】 滤 镜 【 视 频 ] 滤 镜 【 锐 化 ] 滤 镜 【 风 格 化 ] 滤 
镜 和 [其他] 滤 镜 。 

另外 【 滤 镜 ] 菜 单 的 最 后 一 项 是 Digimarc, 该 组 命令 主要 用 于 在 图 像 中 添加 和 读 取水 
印 ( 即 图 像 信息 ) ,以 保护 图 像 版 权 。 


1.【 转 换 为 智能 滤 镜 】 命 令 


智能 滤 镜 是 一 种 非 破坏 性 的 滤 镜 ,可 以 像 使 用 图 层 样式 那样 随时 调整 滤 镜 参数 .隐藏 或 
者 删除 ,这 些 操作 都 不 会 对 图 像 造 成 任何 实质 性 的 破坏 。 

选中 需要 应 用 滤 镜 的 图 层 , 选 择 【[ 滤 镜 〗I【 转 换 为 智能 滤 镜 命令 ,将 所 选 图 层 转 换 为 知 
能 对 象 ,然后 再 使 用 滤 镜 , 即 可 创建 智能 滤 镜 ,在 Photoshop 中 除了 【镜头 校正 】【 液 化] 和 
【消失 点 了 滤 镜 外 ,其 他 滤 镜 都 可 以 作为 智能 滤 镜 使 用 。 


2.【 滤 镜 库 ] 命 令 


在 处 理 图 像 时 ,可 能 需要 单独 使 用 某 一 滤 镜 ,或 者 使 用 多 个 滤 镜 ,或 者 将 某 滤 镜 在 某 图 
像 中 应 用 多 次 。 使 用 [ 滤 镜 库 ] 命 令 不 仅 能 轻松 地 一 次 性 完成 这 儿 种 设置 ,而 且 可 以 预览 图 
像 应 用 多 重 滤 镜 后 的 效果 。 


3.【 液 化 ] 命 令 


【液化 命令 主要 是 使 图 像 产生 特殊 的 扭曲 效果 。 在 [液化] 对 话 框 中 可 以 在 左 侧 的 工具 
列表 中 选择 扭曲 工具 ,在 右 侧 扭曲 选项 下 设置 参数 ,在 图 像 中 拖 忠 鼠标 指针 或 按 住 鼠标 左 键 
不 放 进 行 扭曲 操作 。 


4.【 油 画 ] 命 令 
【油画 了 命令 专门 用 来 制作 油画 效果 。 
5.【 消 失 点 命令 


使 用 消失 点 了 命令 可 以 在 有 透视 角度 的 图 像 中 进行 图 像 编辑 与 处 理 。 通 过 使 用 消失 
点 了 命令 来 修饰 添加 或 移 除 图 像 中 包含 透视 效果 的 内 容 。 


6.【 像 素 化 ] 滤 镜 组 
选择 【 滤 镜 ] 民 像素 化 ] 命 令 会 弹出 相应 的 子 菜单 ,此 类 滤 镜 主要 用 来 将 图 像 分 块 或 将 图 
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像 平面 化 。 它 并 不 是 真正 地 改变 了 图 像 像 素 点 的 形状 ,只 是 在 图 像 中 表现 出 某 种 基础 形状 
的 特征 ,以 形成 一 些 类 似 像素 化 的 形状 改变 。 其 中 各 滤 镜 的 作用 如 下 : 


和 


【 彩 块 化 ] 滤 镜 是 通过 分 组 和 改变 示例 像素 为 相似 的 有 色 像 素 块 生成 手绘 效果 ,或 使 
现实 主义 图 像 变 为 抽象 派 绘画 。 此 滤 镜 通过 单 击 直接 完成 ,不 能 人 工 调 整 参数 控制 
其 效果 。 

【彩色 半 调 了 滤 镜 是 在 图 像 中 添加 带 有 彩色 半 色 调 的 网 点 ,将 图 像 中 的 每 个 颜色 通道 
都 转变 成 着 色 网 点 ,网 点 的 大 小 受 其 亮度 影响 。 

【点 状 化 ] 滤 镜 将 图 像 分 为 随机 的 彩色 斑点 ,空白 部 分 由 背景 色 填 充 。 【点 状 化 ] 滤 镜 
的 效果 与 【彩色 半 调 】 滤 镜 的 效果 相似 ,但 [点 状 化 ] 滤 镜 最 终生 成 的 是 与 原 图 像 颜 色 
一 致 的 斑点 ,而 不 是 各 个 通道 的 原色 斑点 。 

【品格 化 ] 滤 镜 是 将 图 像 中 的 像素 分 块 ,每 块 都 使 用 同一 种 颜色 ,从 而 将 原 图 像 修改 
为 以 多 边 形 的 纯色 色 块 组 成 的 图 像 。 

【马赛 克 ]】 滤 镜 是 通过 将 一 个 单元 内 的 所 有 像素 统一 颜色 来 产生 马赛 克 的 效果 。 通 
常 将 此 滤 镜 与 [编辑 了 民 渐 隐 了 功能 结合 使 用 ,以 得 到 理想 的 效果 。 

【碎片 ] 滤 镜 是 将 图 像 复制 为 4 份 ,再 将 它们 平均 和 移 位 ,从 而 形成 一 种 不 聚焦 的 “四 
重视 ”效果 。 【碎片 3 滤 镜 也 是 通过 单 击 直接 完成 的 ,不 能 控制 效果 。 

【 铀 版 雕刻 ] 滤 镜 是 用 点 、 线 条 和 笔划 重新 生成 图 像 ,产生 镁 刻 的 版 画 效 果 。 它 在 【类 
型 ] 框 中 总 共 提 供 了 10 个 笔 型 选项 。 


【扭曲 ] 滤 镜 组 


选择 [ 滤 镜 〗I【 扭 曲 ] 命 令 会 弹出 相应 的 子 菜单 ,此 组 滤 镜 主要 是 将 当前 图 层 或 选区 内 的 
图 层 进行 各 种 各 样 的 扭曲 变形 。 其 中 各 滤 镜 的 作用 如 下 : 


【波浪 ] 滤 镜 是 一 种 复杂 的 【扭曲 〗 滤 镜 , 也 是 一 种 精确 的 [扭曲 】 滤 镜 , 它 可 以 由 用 
户 控 制 波动 的 效果 ,常用 来 制作 不 规则 扭曲 的 效果 ,如 闪电 、 标 动 的 旗子 、 卷 曲 的 
纸 等 。 

【波纹 了 滤 镜 产生 水 纹 的 涟 注 效 果 , 常 被 用 来 制作 水 面倒 影 等 效果 。 

【 极 坐 标 】 滤 镜 将 图 像 坐 标 从 平面 坐标 转换 为 极 坐标 ,或 从 极 坐 标 转换 为 平面 坐标 ， 
它 使 图 像 产生 一 种 极度 变形 的 效果 ,经 常 把 它 作 为 图 案 设计 工具 或 用 它 创 建 一 些 特 
殊 效果 的 图 像 。 

【 挤 压 】 滤 镜 在 图 像 或 选区 中 间 生 成 一 个 向 内 或 向 外 的 凸 起 , 它 的 效果 有 点 像 [ 球 面 
化 ] 滤 镜 , 但 它 的 凸 起 形态 变形 较 严 重 。 

【 切 变 ] 滤 镜 可 以 根据 在 对 话 框 中 建立 的 曲线 使 图 像 产生 弯曲 效果 。 

【球面 化 ] 滤 镜 通过 将 选区 折 成 球形 、 扭 曲 图 像 以 及 伸展 图 像 以 适合 选中 的 曲线 ,使 
对 象 具有 3D 效果 。 它 可 以 将 图 像 中 所 选 定 的 球形 区 域 或 其 他 区 域 扭曲 膨胀 或 变形 
缩小 ,也 可 以 在 水 平方 向 或 垂直 方向 上 进行 单 向 球 化 。 经 常 使 用 [球面 化 ] 滤 镜 制 作 
带 有 折射 效果 的 球体 效果 ,如 玻璃 球 、 金 属 球 等 ,也 可 以 利用 该 滤 镜 制作 圆柱 形 或 圆 
柱 形 表面 的 效果 ,如 饮料 摊 、 笔 简 、 酒 瓶 上 的 标签 等 。 

【水 波 】 滤 镜 模拟 水 面 上 产生 起 伏 旋 转 的 波纹 效果 。 

【旋转 扭曲 了 滤 镜 产生 旋转 的 风 轮 效果 ,旋转 的 中 心 为 图 像 或 选区 的 中 心 。 
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【和 置换】 滤 镜 是 根据 男 一 个 “. psd” 格 式 图 像 的 明暗 度 将 当前 图 像 中 的 像素 移动 ,从 而 
产生 变形 的 效果 。 


【 杂 色 ] 滤 镜 组 


选择 [ 滤 镜 〗I【 杂 色 ] 命 令 , 会 在 弹出 的 子 菜 单 中 列 出 各 滤 镜 ,此 类 滤 镜 主要 用 于 在 图 像 
中 按 一 定 方式 混入 杂 点 ,以 制作 出 着 色 像素 图 案 的 纹理 。 其 中 各 滤 镜 的 作用 如 下 : 


9 


【减少 杂 色 了 滤 镜 可 以 去 除 图 像 中 的 杂 色 以 及 消除 JPEG 存储 低 品 质 图 像 导致 的 斑 
驭 效果 。 

【 蒙 尘 与 划 痕 3 滤 镜 的 作用 是 搜索 图 像 中 的 缺陷 并 将 其 融和 人 到 周围 像素 中 。 它 将 根 
据 亮度 的 过 渡 差 值 找 出 突出 于 其 周围 像素 的 像素 ,并 用 周围 的 颜色 填充 这 些 区 域 ， 
这 是 消除 图 像 划 痕 的 有 效 方法 ,但 它 也 有 可 能 将 图 像 中 应 有 的 亮点 清除 ,所 以 要 慎 
重 使 用 。 

【去 斑 ] 滤 镜 将 寻找 图 像 中 色彩 范围 变化 最 大 的 区 域 , 然 后 模糊 除去 、 过 滤 边 缘 外 的 
东西 ,使 图 像 中 的 噪音 减少 ,这 个 滤 镜 没有 选项 , 单 击 即 可 直接 执行 , 它 在 清除 图 像 
杂 点 的 同时 会 使 图 像 产生 一 定 的 模糊 ,所 以 大 家 在 使 用 时 要 慎重 。 

【添加 杂 色 了 滤 镜 用 来 将 一 定数 量 的 杂 色 点 以 随机 的 方式 引入 到 图 像 中 , 它 可 以 使 混 
合 时 产生 的 色彩 具有 漫 散 的 效果 。 

【中 间 值 ] 滤 镜 通 过 混合 选区 中 像素 的 亮度 来 减少 图 像 的 杂 色 ,此 滤 镜 搜索 像素 选区 
的 半径 范围 以 查找 亮度 相近 的 像素 、 扔 掉 与 相 邻 像素 差异 太 大 的 像素 ,并 用 搜索 到 
的 像素 中 间 亮 度 值 蔡 换 中 心 像素 ,此 滤 镜 在 消除 或 减少 图 像 的 动感 效果 时 非常 
有 用 。 


.【 模 糊 ] 滤 镜 组 


【模糊 3 滤 镜 组 中 滤 镜 的 作用 是 将 图 像 边缘 过 于 清晰 或 对 比 度 过 于 强烈 的 区 域 进行 模 
糊 ,以 产生 各 种 不 同 的 模糊 效果 ,使 图 像 看 起 来 更 腊 胱 一 些 。 其 中 各 滤 镜 的 作用 如 下 : 


【场景 模糊 了 滤 镜 允许 用 户 创建 一 个 简单 的 全 局 模糊 效果 ,或 从 A 点 到 B 点 的 局 部 
模糊 (以 继续 添加 CD、 等 各 点 )。 当 用 户 应 用 这 个 滤 镜 后 ,会 在 图 像 中 出 现 一 个 
单独 的 大 头 钉 标记 ,可 以 通过 它 对 模糊 进行 控制 。 

【光圈 模糊 了 滤 镜 用 于 将 镜头 的 焦点 对 准 图 像 中 的 某 一 特定 对 象 ,这 个 滤 镜 会 在 需要 
聚焦 的 对 象 周围 创建 一 个 变 亮 的 椭圆 区 域 . 用 户 可 以 对 这 个 椭圆 的 大 小 进行 调节 。 
【倾斜 偏 移 ] 滤 镜 可 以 让 图 片 产生 类 似 于 微缩 景观 的 效果 。 然 而 ,并 不 是 所 有 的 图 像 
都 适合 制作 这 种 效果 。 通 常情 况 下 ,选择 主题 离 镜 头 较 远 的 俯 拍 图 。 

【表面 模糊 】 滤 镜 可 以 在 保留 边缘 的 同时 模糊 图 像 , 此 滤 镜 常用 于 创建 特殊 效果 并 消 
除 杂 色 或 粒度 。 

【动感 模糊 】 滤 镜 只 在 单一 方向 上 对 图 像 像素 进行 模糊 处 理 。 它 可 以 产生 动感 模糊 
的 效果 ,模仿 物体 高 速 运动 时 曝光 的 摄影 手法 ,一 般 较 适合 运动 物体 处 于 画面 中 心 、 
周围 背景 变化 较 少 的 图 像 。 

【 方 框 模糊 ] 滤 镜 只 有 [半径] 一 个 选项 ,该 值 决定 每 个 调整 区 域 的 大 小 ,此 值 越 大 ,图 
像 越 模糊 。 
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【高 斯 模糊 了 滤 镜 是 Photoshop 中 较 常 使 用 的 滤 镜 之 一 , 它 依据 高 斯 曲线 来 调节 图 像 
的 像素 色 值 。 【高 斯 模糊 】 滤 镜 只 有 一 个 【半径 选项 ,调整 [半径 ] 值 可 以 控制 模糊 程 
度 , 从 较 微弱 的 模糊 直到 造成 难以 辨认 的 浓厚 的 图 像 模 糊 。 

【进一步 模糊 】 滤 镜 产生 一 个 固定 的 较 弱 的 模糊 效果 , 它 与 前 面 的 [模糊 3 滤 镜 效 果 相 
似 , 但 其 模糊 程度 是 【模糊 】 滤 镜 的 3 一 4 倍 。 

【 径 向 模糊 了 滤 镜 可 以 创建 一 种 旋转 或 放射 模糊 的 效果 。 

【镜头 模糊 了 滤 镜 向 图 像 中 添加 模糊 以 产生 更 罕 的 景深 效果 ,以 便 使 图 像 中 的 一 些 对 
象 在 焦点 内 ,而 使 另 一 些 区 域 变 模 糊 。 例 如 可 以 将 照片 中 的 前 景 保持 清晰 ,而 使 背 
景 变 得 模糊 。 

【模糊 了 滤 镜 可 以 产生 较 轻 微 的 模糊 效果 , 它 的 模糊 效果 是 固定 的 ,常用 它 来 模糊 图 
像 边 缘 。 

【平均 3 滤 镜 就 是 找 出 图 像 或 选区 中 的 平均 颜色 ,然后 用 该 颜色 填充 图 像 或 选区 。 
【特殊 模糊 了 滤 镜 可 以 产生 一 种 清晰 边界 的 模糊 效果 , 它 只 对 有 微弱 颜色 变化 的 区 域 
进行 模糊 ,不 对 边缘 进行 模糊 。 也 就 是 说 ,该 滤 镜 能 使 图 像 中 原来 较 清 晰 的 部 分 不 
变 , 而 使 原来 较 模 糊 的 部 分 更 加 模糊 。 

【形状 模糊 3 滤 镜 可 以 以 一 定形 状 为 基础 进行 模糊 处 理 。 


10.【 泻 染 ] 滤 镜 组 

【这 染 ] 滤 镜 组 中 的 滤 镜 主要 用 于 改变 图 像 的 光 感 效果 ,例如 模拟 在 图 像 场 景 中 放置 不 
同 的 灯光 ,可 以 产生 不 同 的 光源 放 果 , 也 可 以 与 通道 相配 合 产生 一 种 特殊 的 三 维 浮雕 效果 。 
【 泻 染 ] 滤 镜 组 中 各 滤 镜 的 作用 如 下 : 


【分 层 云彩 3 滤 镜 的 效果 与 原 图 像 的 颜色 有 关 , 它 并 不 完全 覆盖 图 像 , 而 是 相当 于 在 
图 像 中 添加 了 一 个 差异 色 云 彩 效果 。 

【镜头 光 尝 ] 滤 镜 将 产生 摄像 机 镜头 光 坚 效果 ,并 可 自动 调节 摄像 机 光泽 的 位 置 ,可 
以 创建 星光 效果 、 强 烈 的 日 光 效果 以 及 其 他 光芒 效果 等 。 

【纤维 ] 滤 镜 使 用 前 景色 和 背景 色 创建 编织 纤维 的 外 观 ,通常 用 来 制作 纤维 织品 的 效果 。 
【云彩 ] 滤 镜 是 利用 前 景色 和 背景 色 随机 组 合 将 图 像 转换 为 柔和 的 云彩 效果 , 单 击 即 
可 直接 执行 。 使 用 [云彩 3 滤 镜 会 将 原 图 像 全 部 覆盖 。 


11.【 画 笔 描 边 ] 滤 镜 组 


【画笔 描 边 ] 滤 镜 组 中 的 滤 镜 主要 利用 不 同 的 画笔 和 油墨 描 边 效果 创造 出 艺术 绘画 效 
果 。 该 滤 镜 组 中 的 所 有 滤 镜 都 在 Photoshop 的 滤 镜 库 中 。【 画 笔 描 边 ] 滤 镜 组 中 各 滤 镜 的 作 
用 如 下 : 


【成 角 的 线条 】 滤 镜 产生 一 种 不 一 致 方向 的 倾斜 笔触 效果 ,笔触 的 方向 在 图 像 的 不 同 
颜色 区 域内 发 生变 化 ,用 一 个 方向 的 线条 绘制 图 像 的 亮 区 ,用 相反 方向 的 线条 绘制 
暗 区 。 

【墨水 轮廓 】 滤 镜 是 以 钢笔 画 的 风格 用 纤细 的 线条 在 原 图 细节 上 重 绘图 像 。 

【 喷 溅 ] 滤 镜 是 在 图 像 中 产生 画面 颗粒 飞溅 的 效果 ,就 好 像 用 水 喷 在 图 像 上 ,使 图 像 
中 出 现 一 些 细微 的 颜料 滴 。 
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【 喷 色 描 边 了 滤 镜 的 效果 与 【 喷 溅 】 滤 镜 的 效果 有 些 相似 ,但 它 产 生 的 是 倾斜 飞溅 效 
果 , 有 时 利用 【 喷 色 描 边 滤 镜 制作 下 雨 的 效果 。 

【强化 的 边缘 了 滤 镜 主要 用 于 强化 图 像 中 不 同 颜色 之 间 的 边界 ,使 图 像 产生 一 种 强调 
边缘 的 效果 。 

【 深 色 线条 】 滤 镜 生成 的 也 是 交叉 笔触 , 它 用 短 的 、 绷 紧 的 线条 绘制 图 像 接近 黑色 的 
暗 区 ,用 长 的 白色 线条 绘制 图 像 中 的 亮 区 。 该 滤 镜 可 以 使 图 像 产生 一 种 很 强烈 的 黑 
色 阴 影 。 

【烟灰 墨 滤 镜 是 以 日 本 画 的 风格 绘画 ,看 起 来 像 是 用 芒 满 黑色 油墨 的 湿 画 笔 在 宣纸 
上 绘画 ,这 种 效果 具有 非常 黑 的 柔 化 模糊 边缘 ,该 滤 镜 通过 计算 图 像 像素 的 色 值 分 
布 来 产生 色 值 概括 描绘 效果 。 

【 明 影 线 】 滤 镜 保留 原始 图 像 的 细节 和 特征 ,同时 使 用 模拟 的 铅笔 明 影 线 添 加 纹理 ， 
并 使 彩色 区 域 的 边缘 变 暗 。 


12.【 素 描 ] 滤 镜 组 


【素描 ] 滤 镜 组 中 的 大 部 分 滤 镜 将 以 前 景色 和 背景 色 置换 原 图 中 的 色彩 ,产生 一 种 精确 
的 图 像 效 果 ,通常 用 于 获得 3D 效果 或 创建 精美 的 艺术 品 和 手绘 外 观 。 【素描 】 滤 镜 组 中 共 
有 14 种 滤 镜 ,都 被 保存 在 Photoshop 的 滤 镜 库 中 ,只 要 打开 滤 镜 库 , 就 可 以 方便 地 查看 和 设 
置 每 个 [素描 了 滤 镜 。 在 介绍 【素描 了 滤 镜 组 时 ,如 无 特别 说 明 , 则 将 前 景色 设 为 黑色 ,将 背景 
色 设 为 白色 。 

【素描 ] 滤 镜 组 中 各 滤 镜 的 作用 如 下 : 


【 半 调 图 案 ] 滤 镜 是 使 用 前 景色 和 背景 色 的 组 合 重新 给 图 片上 色 ,产生 一 种 网 板 图 案 
的 效果 。 

【便条 纸 】 滤 镜 是 根据 图 像 中 像素 的 明暗 用 前 景色 和 背景 色 蔡 换 原 图 中 像素 的 颜色 ， 
使 图 像 产生 一 种 类 似 用 厚 纸 制 作 的 有 凹陷 效果 的 作品 。 

【粉笔 和 类 笔 ] 滤 镜 合 成 背景 颜色 的 粉笔 笔触 和 前 景 颜色 的 炭 笔 笔触 ,产生 一 种 用 粉 
笔 和 痰 笔 涂 抹 的 草图 效果 ,与 【编辑 了 代 渐 隐 粉 笔 和 痰 笔 】 命 令 结合 使 用 会 取得 更 好 
的 效果 。 

【 络 黄 滤 镜 产生 的 效果 有 点 像 【塑料 效果 】 滤 镜 ,只 是 它 生成 的 效果 是 灰 度 的 , 原 图 
像 的 细节 几乎 全 部 丢失 ,产生 一 种 液体 金属 的 质感 ,有 时 会 用 这 一 滤 镜 配合 【 渐 隐 了 
命令 表现 冰 块 .玻璃 .水面 或 网 缓 等 表面 光滑 的 效果 。 

【绘图 笔 ] 滤 镜 是 用 前 景色 和 背景 色 生成 一 种 钢笔 画素 描 的 效果 ,图 像 中 没有 轮廓 ， 
只 有 一 些 具有 细微 变化 的 笔触 。 

【基底 凸现 ] 滤 镜 在 图 像 中 产生 一 种 浮雕 效果 ,图 像 用 前 景色 和 背景 色 填 充 。 由 于 使 
这 一 滤 镜 的 图 像 细 节 丢 失 较 多 ,所 以 常 将 其 与 菜单 栏 中 的 [编辑]I【 渐 隐 基 底 凸 
现 ] 命 令 配合 使 用 。 

【水 彩 画 纸 】 滤 镜 模仿 在 潮湿 的 纸张 上 作画 的 效果 , 它 模 糊 颜色 并 减少 图 像 反 差 , 产 
生 画 面 浸 湿 、 扩 散 的 效果 。 

【 撕 边 ] 滤 镜 是 用 前 景色 和 背景 色 填充 图 像 .并 在 前 景色 与 背景 色 的 交界 处 制作 溅 射 
的 效果 ,这 一 滤 镜 有 时 会 被 用 来 制作 毛 边 效果 。 
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【塑料 效果 了 滤 镜 利用 前 景色 和 背景 色 填 充 图 像 ,产生 一 种 光滑 的 浮雕 效果 ,其 中 图 
像 的 高 光 部 分 使 用 背景 色 、 较 暗部 分 使 用 前 景 

【类 笔 ] 滤 镜 模 拟 炭 笔 素 描 的 效果 ,图 像 中 较 暗 的 区 域 用 前 景色 的 炭 笔 笔触 着 色 , 较 
亮 的 部 分 用 背景 色 填 充 。 

【 关 精 笔 ] 滤 镜 生成 一 种 用 晴 笔 笔触 以 前 景色 和 背景 色 在 花纹 纸 上 描 绘 的 效果 ,常用 
这 种 工具 配合 【编辑 】 民 渐 隐 炭 精 笔 ] 命 令 制作 磨损 的 地 毯 、 麻 布 等 效果 。 

【图 章 ] 滤 镜 用 前 景色 和 背景 色 填充 图 像 ,产生 的 效果 类 似 于 影印 ,但 没有 影印 清晰 ， 
是 一 种 类 似 于 用 图 章 盖 印 双色 图 像 的 效果 。 

【网 状 了 滤 镜 也 是 用 前 景色 和 背景 色 填充 图 像 并 在 图 像 上 产生 不 规则 的 噪声 ,从 而 生 
成 一 种 网 状 覆 盖 的 效果 。 这 一 滤 镜 常 被 用 来 表示 磁 砖 等 建筑 材料 的 效果 。 

【影印 了 滤 镜 产生 的 效果 就 像 是 在 破旧 的 复制 机 上 复制 图 像 一 样 ,其 色彩 由 前 景色 和 背 
景色 填充 ,图 像 模糊 、 不 均匀 ,并 且 有 色调 分 离 的 效果 ,常用 这 一 滤 镜 制作 有 旧 照 片 的 效果 。 


13.【 纹 理 ] 滤 镜 组 


【纹理 ] 滤 镜 组 中 滤 镜 的 主要 功能 是 使 图 像 产 生 各 种 纹理 过 渡 的 变形 效果 ,常用 来 创建 
图 像 的 凹凸 纹理 和 材质 效果 。 其 中 各 滤 镜 的 作用 如 下 : 


【 扰 裂缝] 滤 镜 是 将 浮雕 效果 与 某 种 爆裂 效果 结合 ,产生 凹凸 不 平 的 裂缝 效果 。 
【颗粒 】 滤 镜 产生 表面 颗粒 的 效果 , 它 相 当 于 一 个 可 控制 的 [添加 杂 色 了 滤 镜 ,常用 这 
一 滤 镜 制作 破损 或 脏 旧 的 效果 。 

【马赛 克 拼 贴 ] 滤 镜 产 生 不 规则 的 .近似 方形 马赛 克 瓷 砖 的 效果 。 

【 拼 级 图 ] 滤 镜 产 生 建 筑 拼 贴 瓷 片 的 效果 ,其 中 原 图 中 较 暗 的 部 分 拼 贴 瓷 片 的 高 度 较 
低 , 较 亮 的 部 分 拼 贴 瓷 片 的 高 度 较 高 。 

【染色 玻璃 ] 滤 镜 产 生 从 背后 被 照 亮 的 不 规则 分 离 的 “彩色 玻璃 格子 "的 效果 ,它们 之 
间 用 前 景色 填充 ,用 背景 色 填 充 间隔 , “玻璃 格子 ”的 色彩 分 布 与 图 片 中 的 颜色 分 布 
有 关 。 这 一 滤 镜 常 被 用 来 制作 玻璃 窗 、 昆 虫 怒 膀 及 龟 裂 的 土地 等 。 

【纹理 化 ] 滤 镜 是 在 图 像 中 添加 软件 给 出 的 纹理 效果 ,或 根据 另 一 个 文件 的 亮度 值 向 
图 像 中 添加 纹理 ,常用 该 滤 镜 制作 布 的 效果 。 


14.【 艺 术 效果 】 滤 镜 组 


【艺术 效果 了】 滤 镜 组 用 来 对 图 像 进行 艺术 效果 处 理 ,此 组 滤 镜 只 应 用 于 RGB 模式 和 多 通 
道 模式 图 像 , 可 以 使 图 像 产生 精美 艺术 品 般 的 效果 。 其 中 各 滤 镜 的 作用 如 下 : 


【壁画 ] 滤 镜 可 产生 古 壁 画 的 斑点 效果 , 它 往往 用 于 在 图 像 边缘 上 添加 黑色 边缘 ,并 
增加 反差 和 饱和 度 。 

【彩色 铅笔 ] 滤 镜 是 模拟 彩色 铅笔 在 纯色 背景 上 绘制 图 像 的 效果 ,图 像 中 较 明显 的 边 
缘 被 保留 并 带 有 粗糙 的 阴影 线 外 观 。 

使 用 [粗糙 蜡笔 3 滤 镜 的 图 像 看 上 去 好 像 是 用 彩色 粉笔 在 带 纹理 的 背景 上 描 过 边 ,在 
亮色 区 域 ,粉笔 看 上 去 很 厚 ,几乎 看 不 见 纹理 ,在 深 色 区 域 ,粉笔 似乎 被 擦 去 了 ,使 纹 
【 底 纹 效果 】 滤 镜 是 根据 纹理 的 类 型 和 色 值 产生 一 种 纹理 喷绘 的 效果 ,经 常 将 它 与 菜 
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单 栏 中 的 【编辑 了 民 渐 隐 ] 命 令 结合 使 用 来 创建 一 种 布料 的 效果 或 油画 的 效果 。 

【 调 色 刀 了 滤 镜 使 相近 的 颜色 融合 产生 大 写意 的 笔法 效果 。 

【 干 画 笔 ] 滤 镜 模 拟 使 用 干 画笔 技术 ( 介 于 油画 和 水 彩 画 之 间 的 绘画 技术 ) 绘 制图 像 
的 边缘 ,使 画面 产生 一 种 不 饱和 ,不 湿润 .干枯 的 油画 效果 ,相当 于 在 一 幅 油 画 颜 料 
未 干 时 用 一 把 干 刷 子 在 图 画 上 涂抹 的 效果 。 

【海报 边缘 】 滤 镜 主要 是 减少 图 像 中 的 颜色 数量 并 用 黑色 勾画 轮廓 ,从 而 将 图 像 转换 
成 一 种 美观 的 招贴 画 效果 。 

【海绵 ] 滤 镜 产 生 画 面 浸 湿 的 效果 , 它 模拟 用 海绵 涂抹 的 效果 。 有 时 用 此 滤 镜 表现 水 
渍 的 效果 。 

【绘画 涂抹 了 滤 镜 就 像 是 一 系列 滤 镜 效果 的 共同 作用 , 先 将 图 像 柔 化 ,再 描 边 ,然后 进 
行 色调 分 离 处 理 , 最 后 锐 化 得 到 。 

【胶片 颗粒 了 滤 镜 产 生 一 种 软片 颗粒 纹理 效果 ,在 增加 图 像 噪声 的 同时 增 亮 图 像 并 加 
大 其 反差 。 

【木刻 了 滤 镜 是 对 图 像 中 的 颜色 进行 色调 分 离 处 理 , 得 到 几乎 不 带 渐变 的 简化 图 像 ， 
处 理 结果 类 似 于 木刻 画 。 

【霓虹灯 光 ] 滤 镜 通 过 结合 前 景色 和 背景 色 给 图 像 重 新 上 色 ,并 产生 各 种 彩色 霓虹灯 
光 的 效果 。 利 用 [党 虹 灯光 】 滤 镜 可 以 创建 出 许多 神奇 而 美丽 的 效果 。 

【水 彩 ] 滤 镜 产 生 的 是 一 种 水 彩 画 的 效果 ,但 它 生成 的 色彩 通常 比 一 般 常见 的 水 彩 夯 
要 深 。 

【塑料 包装 了 滤 镜 增加 图 像 中 的 高 光 并 强调 图 像 中 的 线条 ,使 图 像 产生 一 种 表面 质感 
很 强 的 塑料 压 膜 效果 。 

【涂抹 棒 了 滤 镜 看 起 来 就 像 是 模糊 笔触 产生 的 一 种 条 状 涂抹 效果 。 


15.【 视 频 】 滤 镜 组 


【视频 ] 滤 镜 组 主要 包括 [NTSC 颜色 I【 逐 行 ] 两 个 滤 镜 。 此 组 滤 镜 属于 Photoshop 的 
外 部 接口 程序 ,用 来 从 摄像 机 输入 图 像 或 将 图 像 输 入 到 录像 带 上 。 这 两 个 滤 镜 只 有 当 图 像 
要 在 电视 或 其 他 视频 设备 上 播放 时 才 会 用 到 。 
。【NTSC 颜色 】 滤 镜 转 换 图 像 中 的 色 域 ,使 之 适合 NTSC (National Television 
StandardsCommittee, 国 家 电视 系统 委员 会 制式 ) 视 频 标 准 色 域 ,以 便 图 像 可 被 电视 
机 接收 。 
。【 运 行 ] 滤 镜 是 通过 消除 图 像 中 的 异常 交错 线 来 平滑 影视 图 像 , 它 删除 从 视屏 捕捉 的 
图 像 上 的 横向 扫描 线 , 利 用 复制 或 内 插 法 置换 失去 的 像素 。 


16.【 锐 化 ] 滤 镜 组 


【 锐 化 了 滤 镜 组 中 的 滤 镜 主要 通过 增加 相 邻 像素 点 之 间 的 对 比 度 使 图 像 清晰 化 。 其 中 各 
滤 镜 的 作用 如 下 : 
“【USM 锐 化 ] 滤 镜 是 【 锐 化 3 类 滤 镜 中 应 用 最 多 的 一 种 滤 镜 ,也 是 【 锐 化 了 类 滤 镜 中 唯 
一 可 控制 效果 的 滤 镜 。 该 滤 镜 在 处 理 过 程 中 使 用 模糊 的 谈 罩 ,以 产生 边缘 轮廓 锐 化 
的 效果 , 它 可 以 在 尽 可 能 少 地 增加 噪声 的 情况 下 提高 图 像 的 清晰 度 。 
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【进一步 锐 化 了 滤 镜 相当 于 连续 多 次 使 用 下 面 的 【 锐 化 3 滤 镜 ,从 而 得 到 一 种 强化 锐 化 
的 效果 ,提高 图 像 的 对 比 度 和 清晰 度 。 

【 锐 化 ] 滤 镜 作用 于 图 像 的 全 部 像素 ,增加 图 像 像 素 间 的 反差 ,对 调节 图 像 的 清晰 度 
起 到 一 定 的 作用 ,但 重复 过 多 的 锐 化 会 使 图 像 粗 糙 。 

【 锐 化 边缘 3 滤 镜 的 作用 与 【 锐 化 3 滤 镜 的 作用 相似 ,但 它 仅 仅 锐 化 图 像 的 轮廓 部 分 ， 
以 增加 不 同 颜色 之 间 的 分 界 。 

【智能 锐 化 了 滤 镜 具有 【USM 锐 化 了 滤 镜 所 没有 的 锐 化 控制 功能 ,具有 可 设置 的 锐 化 
计算 方法 ,并 可 单独 控制 图 像 阴影 和 高 光 的 锐 化 程度 。 


17.【 风 格 化 1 滤 镜 组 


【风格 化 了 滤 镜 组 中 的 滤 镜 主要 通过 置换 像素 和 通过 查找 并 增加 图 像 的 对 比 度 产 生 印象 
派 或 其 他 风格 化 画 派 作品 的 效果 。 其 作用 如 下 : 


【查找 边缘 】 滤 镜 搜索 主要 色彩 的 变化 区 域 ,强化 其 过 渡 像 素 , 产 生 用 彩色 铅笔 勾 描 
轮廓 的 效果 。 此 滤 镜 直接 执行 ,没有 可 调 参 数 , 常 将 此 与 [编辑 ]【 渐 隐 ] 命 令 共 同 使 
用 ,生成 铅笔 素描 的 效果 。 

【等 高 线 ] 滤 镜 是 在 图 像 中 围绕 每 个 通道 的 亮 区 和 上 暗 区 边缘 勾画 轮廓 线 ,从 而 产生 三 
原色 的 细 罕 线条 ,经 常 在 这 种 效果 的 基础 上 修改 或 制作 卡通 、 漫 画 等 。 

【 风 ] 滤 镜 是 按 图 像 边 缘 中 的 像素 颜色 增加 一 些小 的 水 平 线 产生 起 风 的 效果 ,此 滤 镜 
不 具有 模糊 图 像 的 效果 , 它 只 影响 图 像 的 边缘 。 常 用 此 滤 镜 来 创建 火焰 、 冰 雪 和 高 
速 运动 的 效果 。 

【浮雕 效果 了 滤 镜 通过 勾画 图 像 或 选区 的 轮廓 和 降低 周围 色 值 来 生成 浮雕 的 效果 。 
【扩散 了 滤 镜 创建 一 种 分 离 模糊 效果 ,看 起 来 有 点 像 透 过 磨砂 玻璃 看 图 像 的 效果 。 

【 拼 贴 3 滤 镜 是 将 图 像 分 裂 成 指定 数目 的 方块 ,并 将 这 些 方块 从 原 位 置 移动 一 定 的 距 
离 。 此 滤 镜 没有 预览 功能 ,所 以 可 能 需要 多 次 调试 。 

【 噪 光 过 度 ] 滤 镜 产生 图 像 正 片 和 负片 混合 的 效果 ,类 似 于 摄影 中 增加 光线 强度 产生 
的 过 度 曝 光 效 果 , 此 滤 镜 直接 执行 ,没有 可 调 参 数 。 

【 凸 出 ] 滤 镜 就 是 将 图 像 附 着 在 一 系列 的 三 维 立 方 体 或 方 锥 体 上 。 


18.【 其 他 ] 滤 镜 组 
【其 他 ] 滤 镜 组 中 各 滤 镜 的 作用 如 下 : 


【高 反差 保留 ] 滤 镜 可 以 删除 图 像 中 亮度 逐渐 变化 的 部 分 ,并 保留 图 像 中 色彩 变化 最 
大 的 部 分 , 它 起 到 一 定 的 压 平 图 像 颜 色 的 作用 。 

【位 移 ] 滤 镜 根据 对 话 框 中 的 值 进行 图 像 偏 移 . 常 用 它 来 编辑 无 缝 图案 中 的 单元 图 像 。 
用 户 可 以 通过 【 自 定 ] 滤 镜 创建 过 滤器 ,如 清晰 化 ,模糊 化 和 浮雕 等 效果 。 

【最 大 值 ] 滤 镜 通过 提 亮 暗 区 边缘 的 像素 将 图 像 中 的 亮 区 放大 ,消减 暗 区 。 

【最 小 值 ] 滤 镜 通过 加 深 亮 区 的 边缘 像素 将 暗 区 放大 ,消减 亮 区 。 


19. Digimarc( 作 品 保护 ) 滤 镜 组 
Digimarc( 作 品 保护 ) 滤 镜 组 主要 包括 【嵌入 水 印 ] 和 【 读 取 水 印 ] 两 个 滤 镜 ,此 组 滤 镜 用 
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于 添加 作品 标记 到 图 像 中 。 
。“【 读 取水 印 ] 滤 镜 将 检查 图 像 , 看 它 是否 有 水 印 。 如 果 没 有 水 印 ,就 会 弹出 一 个 【未 发 
现 水 印 ] 提 示 框 ,提示 没有 水 印 ; 如 果 有 水 印 , 就 会 显示 出 创建 者 的 信息 。 
【嵌入 水 印 ] 滤 镜 是 在 图 像 中 加 入 识别 图 像 创 建 者 的 水 印 , 用 这 一 功能 要 先 获得 一 个 
ID, 这 个 ID 号 是 付 钱 给 Digimarc Corporation 后 收 到 的 号 码 。 一 旦 有 了 这 个 号 码 ， 
就 可 以 单 击 [ 和 嵌入 水 印 ] 对 话 框 中 的 【确认 了 按钮 ,并 根据 对 话 框 的 提示 ,一步 一 步 将 
个 人 的 信息 加 入 到 图 像 中 。 

20. 自 适应 广角 

对 于 摄影 师 以 及 喜欢 拍照 的 摄影 爱好 者 来 说 ,拍摄 风光 或 者 建筑 必然 要 使 用 EF 16- 
35mm F2. 8L II 或 类 似 焦距 的 广角 镜头 进行 拍摄 。 在 用 广角 镜头 拍摄 照片 时 都 会 有 镜头 畸 
变 的 情况 ,让 照片 边 角 位 置 出 现 弯曲 变形 ,即使 再 昂贵 的 镜头 也 是 如 此 。 

在 最 新 的 Photoshop CS6 的 滤 镜 菜单 中 添加 了 一 个 全 新 的 【 自 适 应 广角 命令 ,该 命令 
可 以 在 使 用 Photoshop CS6 处 理 广角 镜头 拍摄 的 照片 时 对 镜头 产生 的 变形 进行 处 理 , 得 到 
一 张 完 全 没有 变形 的 照片 。 

21. 镜头 校正 

【镜头 校正 ] 滤 镜 根 据 各 种 相机 与 镜头 的 测量 自动 校正 ,可 以 轻易 地 消除 桶 状 和 枕 状 变 
形 、 照 片 周围 的 瞳 角 ,以 及 造成 边缘 出 现 彩色 光泽 的 色相 差 。 


64 综合 应 用 


5.4.1 鲜花 字 


制作 鲜花 字 的 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 了 攻打 开 ] 了 命令 ,打开 图 5-22 所 示 的 背景 图 片 。 

(2) 按 Ctrl 十 A 键 选中 图 片 , 按 Ctrl 十 C 键 复制 图 片 ,然后 选择 菜单 栏 中 的 [图 像 】I【 面 
布 大 小 3 命令 ,在 打开 的 对 话 框 中 做 相应 设置 ,如 图 5-23 所 示 。 


当前 大 小 ; 243.5K 一 一 一 一 一 一 一 一 一 
磺 度 : 1.68 厘米 
高 度 : 1.81 厘米 


一 新 建 大 小 : 488.7K 
宽度 (W): 3.36 | 厘米 ~ 


高 度 (H): 1.81 厘米 ~ 


回 相 d(R) 
定位 : 


图 5-22 ”打开 背景 图 片 图 5-23 画布 大 小 设置 
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(3) 按 Ctrl 十 V 键 粘贴 图 片 ,并 对 新 复制 的 图 片 按 Ctrl 十 T 键 执行 自由 变换 ,将 水 平 设 
为 “一 100”, 即 做 成 镜面 效果 ,移动 好 位 置 , 效 果 如 图 5-24 所 示 。 

(4) 单 击 【图 层面 板 下 方 的 【创建 新 的 填充 或 调整 层 ] 按 钮 ,选择 【色彩 平衡 ] 命 令 , 将 作 
为 背景 的 图 片 的 颜色 调整 为 “ 偏 红 色 ”, 效 果 如 图 5-25 所 示 。 


虽 as | 


图 5-24 图 片 镜面 效果 图 5-25 色彩 平衡 设置 


(5) 选择 工具 箱 中 的 文字 工具 ,录入 文字 “鲜花 字 ”, 并 将 “素材 2”“ 素 材 3”“ 素 材 4” 打 
开 , 然 后 将 里 面 的 鲜花 部 分 选中 复制 到 现 有 文件 中 ,并 调整 大 小 、 位 置 ,再 选中 这 3 个 花 的 图 
层 , 按 Ctrl 十 EE 键 合并 图 层 , 效 果 如 图 5-26 所 示 。 


图 5-26 复制 鲜花 并 合并 图 层 


(6) 按 住 Ctrl 键 , 单 击 文字 层 的 图 层 缩 略图 ,将 文字 调 入 选区 ,然后 选中 花 的 图 层 , 单 击 
【图 层面 板 下 面 的 [添加 蒙 版 按钮 ,如 图 5-27 所 示 。 


图 5-27 给 文字 添加 蒙 版 
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(7) 单 击 【 图 层面 板 下 方 的 【新建 图 层 ] 按 钮 ,然后 选中 新 图 层 , 按 Ctrl 键 单 击 文字 缩 
咯 图 ,将 文字 调 入 选区 ,并 选择 【编辑 1【 描 边 ] 命 令 , 在 对 话 框 中 设置 参数 ,如 图 5-28 
所 示 。 

(8) 最 终 效 果 如 图 5-29 所 示 ,保存 文件 。 


宽度 (W): 名 泗 引 


se DM] 


位 置 
| | em 蝇 居 中 (C) 回 居 ?MU) 
混合 
模式 (M): 正常 
不 透明 度 (0): 100 
回 保留 透明 区 域 (p) 


图 5-28 ” 描 边 参数 设置 图 5-29 ”最终 效果 


5.4.2 调 色 


给 图 片 调 色 的 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 [文件 [打开] 命令 ,打开 “素材 1” 图 形 文件 ,如 图 5-30 所 示 。 

(2) 按 Ctrl 二 J 键 ,复制 原始 素材 ,然后 选择 菜单 栏 中 的 【图像 3 民 调整 3 去 色 ] 命 令 , 得 
到 一 张 完全 无 色 的 黑白 照片 ,如 图 5-31 所 示 ,接着 将 黑白 图 层 复制 。 


图 5-30 ”打开 文件 图 5-31 为 图 片 去 色 


(3) 选择 位 于 背景 层 上 方 的 黑白 照片 图 层 , 选 择 【 图 像 】3 民 调整 了 民 阔 值 ] 命 令 ,在 【 阔 值 】 
对 话 框 中 设置 参数 如 图 5-32 所 示 , 单 击 【确定 按钮 退出 。 

(4) 选取 最 上 方 的 黑白 照片 ,选择 【图像 】3 民 调整 了 区 色调 分 离 ] 命 令 ,在 【色调 分 离 ] 对 话 
框 中 设置 参数 如 图 5-33 所 示 , 单 击 【确定 了 按钮 退出 。 
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图 5-32 阅 值 参数 设置 


取消 
预览 ) 


图 5-33 色调 分 离 参 数 设置 


(5) 将 两 个 应 用 不 同色 调 效 果 的 黑白 照片 图 层 混合 ,然后 选中 最 上 面 的 图 层 ,选择 【图 


层 混合 模式 中 的 【正片 释 底 】 ,效果 如 图 5-34 所 示 。 


(6) 在 所 有 图 层 上 建立 一 个 新 的 图 层 , 并 填充 为 黄色 (R: 193,G: 191,B: 2), 然 后 将 该 
图 层 的 混合 模式 设 为 【正片 生 底 】, 得 到 最 终 效果 ,如 图 5-35 所 示 。 


图 5-34 正片 倒 底 后 的 效果 


5.4.3 ”时钟 


制作 时 钟 变换 效果 的 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 了 打开 命令 , 打 
开 * 素 材 1” 图 片 ,如 图 5-36 所 示 。 

(2) 选择 菜单 栏 中 的 [图像 】I[ 调 整 】I【 色 相 / 
饱和 度 ] 命 令 , 打 开 【 色 相 / 饱 和 度 】 对 话 框 ,设置 
参数 如 图 5-37 所 示 , 单 击 【 确 定 ] 按 钮 ,图像 将 变 
成 具有 陈旧 感 的 黄色 。 

(3) 选择 菜单 栏 中 的 [文件 人 [打开 J 命令 ,打开 
时 钟 图 片 。 然 后 使 用 魔 棒 工 具 , 将 容 差 设 为 “50”, 按 
Shift 键 多 次 选择 背景 色 , 按 Ctrl 十 Shift 十 I 键 反 
选 出 时 钟 ,如 图 5-38 所 示 。 

(4) 使 用 移动 工具 将 时 钟 复制 到 背景 图 片 


图 5-36 打开 文件 


中 ,使 用 Ctrl 十 T 键 进行 自由 变换 ,将 时 钟 调整 为 合适 的 大 小 ,效果 如 图 5-39 所 示 。 


(5) 选择 菜单 栏 中 的 [ 滤 镜 了 民 液化 了 命令 ,打开 【液化 ] 对 话 框 ,使 用 变形 工具 在 时 钟 的 
下 部 进行 拖 动 ,使 时 钟 变形 ,如 图 5-40 所 示 ,然后 单 击 【 确 定 ] 按 钮 退出 。 
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色相 /饱和 度 


图 5-37 【色相 /饱和 度 ] 对 话 框 参数 设置 


图 5-38 选择 时 钟 图 5-39 调整 时 钟 


(6) 按 Ctrl 十 工 键 打开 自由 变换 调节 框 , 按 Ctrl 十 Shift 十 Alt 键 调整 左 侧 的 控 点 ,从 而 
调整 时 钟 的 透视 效果 ,如 图 5-41 所 示 。 

(7) 使 用 多 边 形 套 索 工具 选取 时 钟 上 部 , 按 Ctrl 十 Shift 十 丁 键 将 图 像 剪 切 到 新 的 图 层 ， 
如 图 5-42 所 示 。 

(8) 按 Ctrl 十 T 键 打开 自由 变换 调节 框 , 按 住 Ctrl 键 调整 控制 点 ,使 图 像 与 柜子 的 面板 
在 一 个 平面 上 ,此 时 的 效果 如 图 5-43 所 示 。 
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图 5-40 液化 时 钟 


图 5-41 时 钟 透视 效果 


图 5-42 剪 切 时 钟 
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图 5-43 自由 变换 时 钟 


(9) 选择 菜单 栏 中 的 [ 滤 镜 3I【 液 化 命令 ,打开 [液化 ] 对 话 框 ,调整 时 钟 上 面部 分 的 变 
形 效果 ,最 终 效 果 如 图 5-44 所 示 。 


图 5-44 最终 效果 


Flash CS6 概述 | 


本 章 学 习 目 标 : 

名 了 解 Flash 窗口 的 组 成 。 

避 掌 握 Flash 中 文件 及 窗口 的 操作 。 
局 掌握 Flash 动画 的 制作 流程 。 


@.1 Flash CS6 简介 


Flash CS6 以 流 控 制 技术 和 矢量 技术 为 代表 ,能 够 将 矢量 图 .位 图 音频、 动画 和 深 一 层 
交互 动作 有 机 地 ,灵活 地 结合 在 一 起 ,从 而 制作 出 美观 ,新奇 ,交互 性 更 强 的 动画 效果 。 利 用 
它 制 作出 来 的 动画 具有 短小 、 精 悍 的 特点 。 

Flash 的 前 身 叫 FutureSplash, 当时 FutureSplash 最 大 的 两 个 用 户 是 Microsoft 和 
Disney。 

FutureSplash 最 初 是 为 Netscape 开发 的 全 新 网 页 浏览 插件 。FutureWave 公司 本 来 是 
打算 把 这 项 技术 卖 给 Adobe 公司 ,但 是 在 那个 时 候 Adobe 公司 根本 不 感 兴趣 , 而 
Macromedia 公司 对 此 非常 感 兴趣 ,就 这 样 在 1996 年 的 12 月 FutureSplash 被 正式 卖 给 
Macromedia 公司 ,改名 为 Flash1. 0。 后 来 .Macromedia 公司 把 FutureSplash 重新 命名 为 
Flash Playerl. 00。2005 年 4 月 ,Adobe 公司 以 34 亿美 元 收购 了 Macromedia。 从 此 Flash 
开始 了 新 一 轮 的 改革 ,Adobe 发 布 了 新 的 SWF 开发 平台 Flex。Flex 是 面向 传统 程序 员 的 
Flash 开发 工具 ,Flex 基于 IBM Eclips, 包 含有 比 Flash 更 强劲 的 矢量 用 户 界 面 组 建 系统 和 
全 新 的 XML 扩展 标记 语言 ,开发 者 使 用 Flex 可 以 快速 部 署 被 称 为 下 一 代 互联 网 核心 应 用 
的 RIA(Rich Internet Application) 系 统 , 设 计 有 良好 用 户 体 验 和 丰富 交互 特性 的 网 站 。 与 
Flash 相 比 ,Flex 更 适用 于 开发 大 型 项 目 ,并 且 更 加 注重 代码 编写 。 至 2010 年 Flash CS 5.0 
发 布 , 它 可 以 和 Flash Builder( 即 最 新 版 本 的 Flex Builder) 协 作 来 完成 项 目 。 


6.? Flash CS6 的 工作 环境 


(1) 在 启动 Flash CS6 之 后 会 出 现 Flash CS6 的 开始 页 ,如 图 6-1 所 示 , 这 是 许多 
Macromedia 应 用 程序 的 标准 页 面 .要 想 显示 /隐藏 此 页 面 ,可 以 选择 【编辑 ]I【 首 选 参 数 ] 命 
令 ,然后 在 打开 的 对 话 框 中 选择 【常规 ] 选 项 卡 ,在 【启动 时 】 下 拉 菜 单 中 选择 相应 选项 ,如 
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图 6-2 所 示 。 


Fl x Wee) S30 OW mel 


打开 共 和 的 中 


mt 3 0e 国 YD FOUNDS SALE/ 人 名 员 了 


图 6-1 标准 界面 


工作 区 : 四 在 先 顺 卡 中 打开 草 江 影 片 (0) 
加 自动 折 到 图 标 面板 
选择 : 加 使 用 shft 键 连续 选择 
加 显示 工具 提示 (Ww) 
回 接 设 感 应 选择 和 套 索 工具 (C) 
国 显示 3d 影片 和 可 的 负 
时 间 铀 : 回 基于 整体 范围 的 选择 人 ) 
加 场景 上 的 命名 稀 记 0 
加 毫 颜色 : 目 使 用 图 层 颜色 () 
回 加 | x 抱 


打印 : 四 禁用 Postsaiptp) 
自动 收 夏 : 园 0 分 名 
编 让 内 容 : 团 对 齐 左上 广 
回 记 全 朱 定 层 光 苇 导 


图 6-2 【常规 ] 选 项 卡 参数 
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(2) 单 击 【 新 建 〗ActionScript 3.0 项目 ,打开 Flash 工作 界面 ,如 图 6-3 所 示 。 


图 6-3 Flash 工作 界面 


该 界面 主要 被 划分 成 7 个 区 域 。 


菜单 栏 : 菜单 栏 是 Flash 界面 的 控制 中 心 ,可 控制 Flash 文件 和 自 定 义工 作 环境 。 
它 包 括 了 11 个 主 菜单 ,每 个 主 菜 单 的 下 拉 菜 单 中 还 包含 各 种 相应 的 操作 命令 和 选 
项 。 为 了 方便 用 户 操 作 , 各 主 菜单 下 的 很 多 子 菜单 都 附 有 相应 的 快捷 键 , 通 过 使 用 
这 些 快捷 键 ,用 户 可 以 直接 执行 相应 的 操作 命令 ,从 而 提高 效率 。 

主 工具 栏 : 将 一 些 常用 命令 以 按钮 形式 组 织 在 一 起 , 置 于 操作 界面 的 上 方 。 

工具 箱 : 工具 箱 中 提供 了 绘制 和 编辑 图 形 的 各 种 工具 ,分 为 “工具 ”“ 查 看 "“ 颜 
色 ”“ 选 项 ”4 个 功能 区 。 

时 间 轴 : 控制 不 同 层 中 动画 的 帧 数 与 帧 的 效果 ,包括 新 层 的 增加 、 引 导 层 的 建立 、 层 
的 删除 及 相关 帧 的 操作 。 

场景 和 舞台 : 场景 是 所 有 动画 元 素 最 大 的 活动 空间 ,舞台 是 播放 Flash 电影 时 用 户 
能 看 得 到 的 区 域 。 它 包含 所 有 可 视 的 文档 元 素 以 及 某 些 情况 下 不 可 视 的 文档 元 素 ， 
如 文本 、 图 像 .视频 和 声音 。 

【属性 了 面板 : 用 来 修改 文档 和 选 定 对 象 的 面板 。 

浮动 面板 : 可 以 快速 激活 各 个 常用 面板 ,其 中 包括 【属性 了 面板 【动作 面板 【颜色 】 
面板 等 。 


6.3 Flash CS6 的 基本 操作 


对 文件 进行 建立 和 保存 是 Flash 中 最 基本 的 操作 ,同时 文件 的 导入 /导出 是 Flash 中 比 
较 特殊 的 操作 ,大 家 要 尤为 重视 。 
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6.3.1 文件 的 新 建 


(1) 启动 Flash CS6 ,新 建 一 个 Flash 文档 。 选 择 [开始 菜单 中 的 【程序 】〗 Adobe Flash 
CS6 Professional 命令 ,启动 Flash 软件 ,出 现 图 6-1 所 示 的 开始 页 ,然后 单 击 【 新 建 】| 
ActionScript 3.0 项 目 , 进 入 Flash 工作 界面 ,如 图 6-3 所 示 。 

(2) 在 Flash 工作 界面 中 选择 [文件 ] 民 新 建 ] 命 令 ,切换 到 【常规 ] 选 项 卡 , 在 【类 型 ] 中 
选择 某 一 项 ,可 新 建文 档 。 


6.3.2 文件 的 保存 


当 第 一 次 保存 文件 时 ,【 保 存 ] 命 令 与 [另存 为 ] 命 令 等 效 ,都 是 打开 [另存 为 ] 对 话 框 ,可 
以 在 其 中 输入 [文件 名 ] 和 选择 [类 型 ,保存 文档 。 

当 文 件 不 是 第 一 次 保存 时 ,【 文 件 ] 菜 单 中 的 【保存 ] 命 令 可 以 将 文件 覆盖 保存 ; 而 [ 文 
件 ] 菜 单 中 的 [另存 为 3 命令 则 打开 [另存 为 7 对话 框 ,选择 不 同 的 [文件 名 3 或 [类 型 】, 可 以 将 
文档 再 存 一 份 。 

在 Flash 中 ,默认 文件 的 保存 格式 为 . fla, 它 是 Flash 的 源 文件 ,可 以 在 Flash 软件 中 打 
开 、 编 辑 和 保存 ,Flash 中 所 有 的 原始 素材 和 全 部 原始 信息 都 保存 在 . fla 文件 中 。 


6.3.3 设置 影片 属性 


影片 的 [属性 了 面板 默认 出 现在 起 始 界面 的 右 侧 ,也 可 以 按 Ctrl 十 F3 键 打开 【属性 ] 面 
板 。【〖 属 性 了 面板 用 于 显示 或 更 改 当 前 动画 文档 \ 文 本 、` 元 件 . 形 状 、 位 图 .视频 \ 帧 或 工具 的 相 
关 信息 和 设置 ,根据 所 选 的 对 象 不 同 , 该 面板 中 显示 的 内 容 也 不 同 。 如 图 6-4 所 示 为 文档 的 
基本 属性 ,给 出 了 该 文档 的 文件 名 \ 目 标 、 脚 本 、 大 小 、 帧 频 等 信息 。 


图 6-4 【属性 了 面板 
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6.3.4 设置 首选 参数 
选择 菜单 栏 中 的 【编辑 】 区 首选 参数 ] 命 令 , 打 开 【 首 选 参数 ] 对 话 框 ,如 图 6-5 所 示 。 


启动 时 : 
撤消 (J) 


100 | 层级 


工作 区 : 回 在 选项 卡 中 打开 列 试 如 片 (o) 
加 自动 折 套 图 标 面板 
选择 : 加 使 用 shift 键 连 续 选择 9 
回 显 示 工具 提示 (Ww) 


团 接 多 应 寺 择 和 疙 案 工具 (C) 
回 显示 4 影片 加 的 物 
时间 者 : 回 基 于 整体 范 国 的 选择 6) 
回 场景 上 的 命名 福 记 0 
加 之 颜色 : © 使 用 图 层 颜色 (] 
加 加 | 给 本 对 旬 
加 | 全 画 基本 
里 组 
加 行 8 
大 | 其 它 元 素 
打印 : 加 禁用 Postsaiptp) 
自动 收复 : 国 “10 分 加 
缩放 内 容 : 加 对齐 左上 方 
团 包 含 负 定 层 和 泣 巷 导 


图 6-5 【首选 参数 对话 框 
在 此 对 话 框 中 可 以 对 文档 做 初步 设置 ,如 启动 界面 .工作 区 选项 ,自动 套用 格式 等 。 
6.3.5 文件 的 导入 与 导出 


1. 文件 的 导入 


选择 菜单 栏 中 的 【文件 了 区 导入 了 命令 ,可 将 图 像 声音、 动画 等 文件 导入 到 相应 位 置 ,如 
图 6-6 所 示 。 


图 6-6 【导入 菜单 
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2. 文件 的 导出 


选择 菜单 栏 中 的 [文件 〗I【 导 出 J 命令 ,可 将 该 文档 导出 为 图 像 \ 动 画 、 音 频 、 图 片 序列 等 
到 相应 位 置 ,如 图 6-7 所 示 。 


还 原 (H) 

Sm ， 

SH ee | Sa). 

发 布设 置 G)-. CaltshiftrFl2 HE l 
上 ,| HFM).. Ctrl+Alt+Shift+S 
属 布 (B) Alt+Shift+F12 


图 6-7 【导出 菜单 


。*【 导 出 图 像 】: 可 以 将 当前 帧 或 所 选 图 像 导出 为 一 种 静止 图 像 格 式 或 导出 为 单 帧 
Flash Player 应 用 程序 。 

*。【 导 出 所 选 内 容 】: 可 以 将 当前 所 选 内 容 导 出 为 一 个 扩展 名 为 . fxg 的 文件 。 

*【 导 出 影片 〗: 可 以 将 动画 导出 为 包含 一 系列 图 片 .音频 的 动画 格式 或 静止 帧 。 当 导 
出 静止 图 像 时 ,可 以 为 文档 中 的 每 一 帧 都 创建 一 个 带 有 编号 的 图 像 。 另 外 ,还 可 以 
将 文档 中 的 声音 导出 为 WAV 文件 。 


3. 输出 影片 格式 


Flash CS6 可 以 输出 多 种 格式 的 动画 或 图 形 文件 ,一 般 包含 以 下 几 种 常见 类 型 ; 

1) SWF 影片 (* .swf) 

SWF 动画 是 浏览 网 页 时 常见 的 动画 格式 ,是 以 . swf 为 扩展 名 的 文件 ,具有 动画 、 声 音 
和 交互 等 功能 , 它 需 要 在 浏览 器 中 安装 Flash 播放 器 插件 才能 观看 ,将 整个 文档 导出 为 具有 
动画 效果 和 交互 功能 的 SWF 文件 ,以 便 将 Flash 内 容 应 用 到 其 他 应 用 程序 中 ,例如 
Dreamweaver。 

2) Windows AVI( * .avi) 

Windows AVI 是 标准 的 Windows 影片 格式 , 它 是 一 种 很 好 的 用 于 在 视频 编辑 应 用 程 
序 中 打开 的 Flash 动画 格式 ,由 于 AVI 是 基于 位 图 的 格式 ,因此 如 果 包 含 的 动画 很 长 或 者 
分 辨 率 比较 高 ,文件 量 会 非常 大 。 在 将 Flash 文件 导出 为 Windows 视频 时 会 丢失 所 有 的 交 
互 功能 。 

3) WAV 音频 (* . wav) 

用 户 可 以 将 动画 中 的 音频 对 象 导 出 ,并 以 WAV 声音 文件 格式 保存 。 

4) JPEG 图 像 (* .jpg) 

用 户 还 可 以 将 Flash 文档 中 当前 帧 上 的 对 象 导出 成 JPEG 位 图 文件 ,JPEG 格式 图 像 为 
高 压缩 比 的 24 位 位 图 ,JPEG 格式 适合 显示 包含 连续 色调 (如 照片 .嵌入 位 图 或 渐变 色 ) 的 
图 像 , 其 导出 设置 与 位 图 (BMP) 相 似 。 

5) GIF 序列 ( x . gif) 

网 页 中 常见 的 动态 图 标 大 部 分 是 GIF 动画 形式 , 它 由 多 个 连续 的 GIF 图 像 组 成 ,在 
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Flash 动画 时 间 轴 上 的 每 一 帧 都 会 变 为 GIF 动画 中 的 一 幅 图 片 ,GIF 动画 不 支持 声音 和 交 
互 ,并 且 比 不 含 声音 的 SWF 动画 文件 量 大 。 

6) PNG 序列 ( x. png) 

PNG 文件 格式 是 一 种 可 以 跨 平 台 、 支 持 透 明度 的 图 像 格 式 。 


6.4 Flash 动画 的 制作 流程 


制作 Flash 动画 最 基本 的 过 程 如 下 : 
(1) 设 定 舞 台 尺寸 和 安排 场景 。 

(2) 创建 和 插入 动画 成 员 。 

(3) 设 定 动画 效果 。 

(4) 预览 并 测试 动画 。 

(5) 保存 .输出 与 发 布 动画 。 


6.5 综合 应 用 


6.5.1 设置 舞台 的 显示 比率 


选择 菜单 栏 中 的 [视图 [缩放 比率 I[ 符 合 窗口 大 小 3 命令 ,如 图 6-8 所 示 , 可 以 让 整个 
舞台 显示 在 窗口 内 。 
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图 6-8 设置 舞台 的 显示 比率 


6.5.2 设置 显示 网 格 线 


选择 菜单 栏 中 的 [视图 〗I[ 网 格 〗I【 显 示 网 格 ] 命 令 , 该 命令 前 车 有 “MV ”表示 显示 ,如 图 6-9 
所 示 ,再 次 选择 可 以 隐藏 。 
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Cel+Shift+W 
Chrl+Alt+Shift+R 


图 6-9 显示 网 格 


6.5.3 自 定义 工具 面板 


选择 菜单 栏 中 的 【编辑 了 区 自 定义 工具 面板 命令 ,打开 【 自 定义 工具 面板 对话 框 , 如 
图 6-10 所 示 。 单 击 最 左 侧 的 工具 按钮 ,然后 将 可 用 工具 选中 , 单 击 【 增 加 3 按钮 ,就 可 以 将 该 
工具 添加 到 在 最 左 侧 选中 的 工具 按钮 的 隐藏 菜单 中 ,如 图 6-11 所 示 。 


图 6-10 添加 工具 图 6-11 添加 工具 后 的 效果 


Flash CS6 工具 箱 | 


本 章 学 习 目 标 : 
名 了 解 Flash 工具 箱 中 的 所 有 工具 。 
局 掌握 Flash 工具 箱 中 常用 工具 的 使 用 。 


CC, 绘制 图 形 的 工具 


在 制作 Flash 动画 时 ,很 多 图 形 需 要 用 户 自己 去 绘制 ,Flash 自 带 了 一 些 绘图 工具 ,用 户 
使 用 这 些 工具 可 以 绘制 出 丰富 多 样 的 图 形 。Flash 中 的 绘图 工具 包括 线条 工具 、 铅 笔 工具 、 
椭圆 工具 、 和 矩形 工具 、 刷 子 工具 和 钢笔 工具 等 。 


7.1.1 线条 工具 


线条 工具 主要 用 于 绘制 不 同 角 度 的 矢量 直线 。 选 择 线条 工具 ,在 舞台 上 单 击 鼠标 , 按 住 
鼠标 左 键 不 放 并 向 右 拖 动 到 需要 的 位 置 , 松 开 鼠 标 , 即 可 绘制 出 一 条 直线 ,效果 如 图 7-1 所 
示 。 在 线条 工具 的 [属性] 面板 中 可 以 设置 笔触 颜色 、 笔 触 大 小 ,笔触 样式 ,如 图 7-2 所 示 。 


接合 : 会 | 。 尖 角 :3.00 


图 7-1 直线 图 7-2 线条 工具 的 【属性 了 面板 


选择 线条 工具 后 ,在 工具 箱 下 面 会 出 现 [ 对 象 绘制 ] 和 【 贴 紧 至 对 象 ] 两 个 按钮 。 
【对 象 绘制 ]: 当选 择 了 【对 象 绘制 ] 按 钮 时 ,在 舞台 中 绘制 的 “直线 ”将 自动 转换 为 组 ”。 
【 贴 紧 至 对 象 〗: 当选 择 了 【 贴 紧 至 对 象 ] 按 钮 时 ,在 绘制 对 象 时 ,线段 会 开启 “吸附 ” 功 
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能 ,可 以 更 好 地 绘制 对 象 。 在 图 中 , 当 一 条 线 接近 另 一 条 线 时 ,在 线段 的 一 端 会 出 现 一 个 “ 空 
心 圆 ”, 它 可 以 很 自然 地 和 另 一 条 线段 连接 在 一 起 。 在 绘制 对 象 时 ,经 常会 使 用 贴 紧 至 对 
象 ] 按 钮 ,用 户 可 以 根据 具体 情况 对 这 个 功能 进行 切换 。 

。*【 笔 触 颜色 】: 设置 线段 的 颜色 。 

“ 【笔触 高 度 】: 设置 线段 的 高 度 。 

*【 笔 触 样式 】: 在 该 下 拉 列 表 中 可 以 选择 各 种 线段 样式 。 

*【 提 示 】: 将 笔触 锚 点 保持 为 全 像素 可 防止 出 现 模糊 线 。 

*【 端 点 】: 可 以 选择 “ 圆 角 ” 或 “方形 "笔触 。 


7.1.2 铅笔 工具 


铅笔 工具 主要 利用 前 景色 绘制 任意 线条 。 选 择 铅笔 工具 ,在 舞台 上 单 击 鼠 标 , 按 住 鼠标 
左 键 不 放 , 松 开 鼠 标 , 在 舞台 上 随意 绘制 线条 ,效果 如 图 7-3 所 示 。 如 果 想 要 绘制 出 平滑 或 
伸 直 的 线条 和 形状 ,可 以 在 工具 箱 下 方 的 选项 区 中 为 铅笔 工具 选择 一 种 绘画 模式 ,如 图 7-4 
所 示 。 

。【 伸 直 】: 可 以 绘制 直线 ,并 将 接近 三 角形 、 椭 圆 、 圆 形 、 和 矩形 和 正方 形 的 形状 转换 为 

这 些 常 见 的 几何 形状 。 

。【 平 滑 】: 可 以 绘制 平滑 曲线 。 

*。【 墨 水 〗: 可 以 绘制 接近 手绘 的 线条 。 

在 铅笔 工具 的 【属性 了 面板 中 可 以 设置 不 同 的 笔触 颜色 .笔触 大 小 .笔触 样式 ,如 图 7-5 
所 示 。 


图 7-3 铅笔 绘制 效果 


图 7-4 铅笔 的 绘画 模式 图 7-5 铅笔 工具 的 【属性 了 面板 


7.1.3 椭圆 工具 


椭圆 工具 主要 用 于 绘制 椭圆 图 形 , 它 和 和 矩形 工具 类 似 ,差别 在 于 椭圆 工具 的 选项 中 有 关 
于 角度 和 内 径 的 设置 。 选 择 椭 圆 工具 ,在 舞台 上 单 击 , 按 住 鼠标 左 键 不 放 向 需要 的 位 置 拖 
动 , 松 开 鼠 标 , 即 可 绘制 出 椭圆 ,效果 如 图 7-6 所 示 。 在 椭圆 工具 的 【属性 了 面板 中 可 以 设置 
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不 同 的 笔触 颜色 笔触 大 小 、 笔 触 样式 ,如 图 7-7 所 示 。 


图 7-6 椭圆 图 7-7 椭圆 工具 的 [属性 面板 


。【 开 始 角 度 】: 设置 要 绘制 圆 的 起 始 角度 。 
。*【 结 束 角度 】: 设置 要 绘制 圆 的 结束 角度 ,和 [开始 角度 3 一 起 使 用 会 绘制 一 个 饼 图 。 
【闭合 路 径 】: 勾 选 该 复 选 框 会 绘制 一 个 圆 环 。 


7.1.4 和 矩形 工具 


矩形 工具 主要 用 于 绘制 矩形 图 形 , 这 些 图 形 不 仅 能 够 设置 形状 、 大 小 、 颜 色 , 还 可 以 设置 
边 角 半 径 以 修改 矩形 形状 。 选 择 和 矩形 工具 ,在 舞台 上 单 击 鼠标 , 按 住 鼠 标 左 键 不 放 向 需要 的 
位 置 拖 动 , 松 开 鼠标 , 即 可 绘制 出 矩形 图 形 ,效果 如 图 7-8 所 示 。 在 和 矩形 工具 的 【属性 面板 
中 可 以 设置 不 同 的 笔触 颜色 ,笔触 大 小 、 笔 触 样式 和 填充 颜色 ,如 图 7-9 所 示 。 


图 7-8 和 矩形 图 7-9 矩形 工具 的 [属性 面板 
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与 其 他 图 形 工具 不 同 的 是 和 矩形 选项 部 分 可 以 设置 矩形 的 圆 角 , 这 样 绘制 出 来 的 就 是 贺 
角 和 矩形 。 


7.1.5 多 角 星 形 工具 


多 角 星 形 工 具 主 要 用 于 绘制 多 边 形 和 多 角 星 形 , 使 用 多 角 星 形 工具 可 以 绘制 出 不 同样 
式 的 多 边 形 和 星 形 。 选 择 多 角 星 形 工具 ,在 舞台 上 单 击 , 按 住 鼠 标 左 键 不 放 向 需要 的 位 置 拖 
动 , 松 开 鼠 标 , 即 可 绘制 出 多 边 形 ,效果 如 图 7-10 所 示 。 在 多 角 星 形 工具 的 【属性 了 面板 中 可 
以 设置 不 同 的 笔触 颜色 .笔触 大 小 、 笔 触 样式 和 填充 颜色 ,如 图 7-11 所 示 。 


图 7-10 多 角 星 形 图 7-11 多 角 星 形 工具 的 [属性] 面板 


单 击 【 属 性 3 面板 下 方 的 [选项 按钮 ,弹出 【工具 设置 ] 对 话 框 ,在 该 对 话 框 中 可 以 自 定义 
多 边 形 的 各 种 属性 。 
“【 样 式 ] 选 项 : 在 此 选择 绘制 多 边 形 或 星 形 。 
*。【 边 数 ] 选 项 : 设置 多 边 形 的 边 数 ,其 范围 为 3 一 32。 
*【 星 形 顶 点 大 小 了 选项 : 输入 一 个 0 一 1 之 间 的 数字 以 指定 星 形 项 点 的 深度 ,此 数字 越 
接近 0, 创 建 的 顶点 就 越 深 ,此 选项 在 多 边 形 的 绘制 中 不 起 作用 。 
在 设置 不 同 值 以 后 ,绘制 出 的 多 边 形 和 星 形 不 同 。 


7.1.6 刷子 工具 
选择 刷子 工具 ,在 舞台 上 单 击 鼠标 , 按 住 鼠 标 左 键 不 放 拖 动 ,随意 绘制 , 松 开 鼠 标 ,效果 


如 图 7-12 所 示 。 刷 子 工具 的 【属性 了 面板 与 其 他 绘图 工具 的 【属性 了 面板 相似 ,可 以 在 其 中 设 
署 不 同 的 填充 颜色 和 笔触 平滑 度 等 ,但 是 在 选择 刷子 工具 后 ,在 工具 箱 下 方 会 出 现 【刷子 模 


式 ] 按 钮 ,如 图 7-13 所 示 。 
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图 7-12 刷子 绘制 效果 图 7-13 刷子 模式 


系统 在 工具 箱 的 下 方 提供 了 5 种 刷子 的 模式 。 

“【 标 准 绘画 了 模式 : 在 同一 层 的 线条 和 填充 上 以 覆盖 的 方式 涂 色 。 

“【 颜 料 填充 了 模式: 对 填充 区 域 和 空白 区 域 涂 色 ,其 他 部 分 (如 边框 线 ) 不 受 影 响 。 

“*“【【 后 面 绘画 模式 : 对 舞台 上 同一 层 的 空白 区 域 涂 色 ,但 不 影响 原 有 的 线条 和 填充 。 

“【 颜 料 选择 模式 : 在 选 定 的 区 域内 涂 色 ,未 被 选中 的 区 域 不 能 涂 色 。 

*【 内 部 绘画 模式 : 在 内 部 填充 上 绘图 ,但 不 影响 线条 ,如 果 从 空白 区 域 中 开始 涂 色 ， 
该 填充 不 会 影响 任何 现在 填充 区 域 。 


7.1.7 ”喷涂 刷 工具 


喷涂 刷 工 具 类 似 于 粒子 喷射 器 ,使 用 它 可 以 一 次 将 形状 图 案 刷 到 舞台 上 ,如 果 使 用 喷涂 
刷 工 具 , 可 在 工具 栏 中 按 住 常规 剧 工 具 , 直 到 弹出 【 刷 选 择 】 菜 单 , 再 单 击 【 喷 涂 刷 〗。 与 使 用 
常规 剧 一 样 在 舞台 上 绘制 , 喷 出 的 一 些 圆 形 小 颗粒 将 显示 为 一 组 。 单 击 【属性 了 面板 中 的 拾 
色 器 并 选择 另 一 种 颜色 ,更改 刷子 的 颜色 ,然后 在 舞台 上 绘制 其 他 内 容 , 如 图 7-14 所 示 。 


图 7-14 喷涂 剧 工 具 效果 及 【属性 了 面板 
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【元 件 】: 可 以 看 到 喷涂 刷 工 具 的 [属性 了 面板 默认 勾 选 【默认 形状 了 复 选 框 ,用 户 可 以 
建立 自己 的 图 形 ,然后 选择 图 形 并 按 F8 键 转 换 为 图 形 元 件 或 影片 剪辑 元 件 ,这 样 在 
喷涂 时 就 可 以 选择 用 户 刚 准备 好 的 图 形 元 件 或 影片 剪辑 元 件 了 。 在 选择 了 元 件 之 
后 ,就 可 以 进行 旋转 元 件 或 随机 旋转 的 操作 了 。 

【缩放 】: 调整 喷涂 刷 工 具 的 喷涂 大 小 ,可 以 设置 为 0 一 40000 之 间 的 数值 。 

【随机 缩放 】: 勾 选 后 所 喷涂 的 图 形 为 随机 大 小 ,这 样 更 符合 喷涂 刷 工具 的 实际 使 用 
效果 。 

【 面 笔 ]: 在 列表 中 可 以 对 [宽度 】【 高 度 ] 和 【[ 面 笔 角 度 】 进 行 设置 。 [宽度] 和 [高 度 】 
分 别 对 应 喷涂 刷 工 具 的 喷涂 范围 ,如 将 【宽度 设置 为 0 像素 ,将 【高 度 】 设 置 为 50 像 
素 ,那么 喷涂 出 来 的 图 形 就 是 一 个 竖 条 图 形 。【 画 笔 角 度 ] 可 以 对 喷涂 的 基础 图 形 进 
行 角 度 的 设置 ,这 样 可 以 模仿 实际 情况 下 的 喷涂 方向 。 


7.1.8 钢笔 工具 


钢笔 工具 主要 用 于 绘制 比较 复杂 、 精 确 的 曲线 路 径 。 选 择 钢笔 工具 ,将 鼠标 指针 放置 到 
舞台 上 想 要 绘制 曲线 的 起 始 位 置 ,然后 按 住 鼠标 左 键 不 放 , 此 时 将 » 
出 现 第 一 个 锚 点 ,并 且 钢 笔尖 光标 变 为 箭头 形状 , 松 开 鼠 标 ,将 鼠标 | 
指针 放置 到 想 要 绘制 的 第 二 个 锚 点 的 位 置 , 单 击 鼠 标 并 按 住 鼠标 左 。 

键 不 放 绘制 出 一 条 直线 段 ,将 鼠标 向 其 他 方向 拖 动 ,直线 转换 为 曲 f 
线 , 松 开 鼠 标 ,一 条 曲线 绘制 完成 ,如 图 7-15 所 示 。 

在 绘制 线段 时 钢笔 工具 的 光标 会 产生 不 同 的 变化 ,其 表示 的 含 | 
义 不 同 。 | 
。 增加 节点 : 当 光 标 变 为 带 加 号 时 ,在 线段 上 单 击 鼠 标 就 会 增 | 

加 一 个 节点 ,这 样 有 助 于 更 精确 地 调整 线段 。 
。 删除 节点 : 当 光 标 变 为 带 减 号 时 ,在 线段 上 单 击 一 个 节点 ， 


图 7-15 用 钢笔 工具 


绘制 曲线 
就 会 将 这 个 节点 删除 。 
。 转换 节 点 : 当 光 标 变 为 带 折线 时 ,在 线段 上 单 击 节点 ,就 会 将 这 个 节点 从 曲线 节点 
转换 为 直线 节点 。 


7.1.9 Deco 工具 


Deco 工具 是 装饰 性 绘画 工具 ,可 以 将 创建 的 图 形 形 状 转变 为 复杂 的 几何 图 案 。 首 先 制 
作 影 片 剪辑 元 件 ,在 【绘制 效果 了 中 选择 某 一 效果 , 单 击 【编辑 了 按钮 ,将 所 做 元 件 与 动画 联系 
到 一 起 ,在 【高 级 ] 中 进行 相应 的 属性 设置 后 ,在 舞台 上 单 击 ,自动 生成 动画 。 其 中 ,由 于 选择 
的 绘制 效果 不 同 , 其 下 方 出 现 的 参数 也 不 同 , 有 的 出 现 两 个 元 件 需要 编辑 ,有 的 不 需要 元 件 。 
Deco 工具 的 【属性 了 面板 如 图 7-16 所 示 。 

当 绘 制 效 果 为 茧 蔓 式 填充 时 参数 如 下 。 

*“【 树 叶 3 与 【 花 】: 设置 的 是 将 已 有 影片 剪辑 进行 编辑 。 

“ 【分 支 角度 】: 指定 分 支 图 案 的 角度 。 

“ 【图案 缩 放 : 缩放 操作 会 使 对 象 同时 沿 着 水 平方 向 和 垂直 方向 放大 或 者 缩小 。 
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7-16 ”Deco 工具 的 [属性 ] 面 板 


【上段 长 度 】: 指定 叶子 节点 和 花 条 节点 之 间 的 段 长 度 。 


【动画 图 案 】: 指定 效果 的 每 次 迭代 都 绘制 到 时 间 轴 中 的 新 帧 。 在 绘制 花 朱 图案 时 ， 
勾 选 此 复 选 框 将 创建 花 休 图 案 的 逐 帧 动画 序列 。 
“【【 帧 步骤 ]: 指定 绘制 效果 时 每 秒 要 横 跨 的 帧 数 。 


C3 文本 工具 


文本 是 任何 动画 都 不 可 或 缺 的 元 素 之 一 ,在 Flash CS6 中 提供 了 方便 的 文本 输入 与 编 
辑 功 能 。 


7.2.1 文本 的 输入 


(1) 选择 工具 箱 中 的 文本 工具 ,将 鼠标 指针 移动 到 舞台 上 , 单 击 鼠 标 ,开始 输入 。 

(2) 选择 工具 箱 中 的 文本 工具 ,将 鼠标 指针 移动 到 舞台 上 , 按 住 鼠标 左 键 拖 动 ,出 现 一 
个 矩形 文本 框 ,代表 此 文本 输入 框 有 宽度 限制 , 当 输 入 的 字符 超过 输入 框 的 宽度 时 ,文字 会 
自动 换行 。 

7.2.2 文本 的 类 型 


在 Flash 中 输入 的 文本 可 以 分 为 3 种 类 型 ,分 别 是 静态 文本 ,动态 文本 和 输入 文本 ,这 3 
种 文本 类 型 可 以 在 文本 工具 的 [属性 面板 的 文本 类 型 下 拉 列 表 框 中 选择 。 
(1) 静态 文本 : 一 种 静止 不 动 的 文本 ,是 在 Flash 动画 运行 过 程 中 不 能 修改 的 文字 。 
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(2) 动态 文本 : 在 Flash 动画 运行 过 程 中 可 以 动态 显示 的 文字 ,通常 需要 结合 AS 动态 
显示 一 些 数据 或 运算 结果 。 

(3) 输入 文本 : 在 Flash 动画 运行 过 程 中 可 以 输入 文字 ,与 动态 文本 一 样 ,需要 结合 AS 
达到 动画 和 用 户 交 互 的 目的 。 


7.2.3 文本 工具 的 [属性 ] 面 板 


当选 择 文本 工具 后 ,或 者 在 舞台 上 输入 文本 后 ,打开 【属性 】 面 板 ,可 以 设置 文本 的 相关 
属性 ,如 图 7-17 所 示 。 
【文本 引擎 】: 在 Flash CS6 中 ,【 文 本 引擎 和 有 TLF 
和 传统 文本 两 种 ,其 中 TLF 文本 是 一 种 文本 引 
敬一 一 文本 布局 框架 向 Flash 中 添加 文本 , 它 可 以 


支持 更 多 ,更 丰富 的 文本 布局 功能 和 对 文本 属性 | 有 Eee 让 
的 精细 控制 。 大 小 : 2 点 字 回 间距 :00 
“ 【文本 类 型 ]: 共有 3 种 ,分 别 是 静态 文本 、 动 态 文 | We eng# 
0 ts: [SEE 
【系列 ]; 设置 选 定 字符 或 整个 文本 的 文字 字体 。 | 
。 【样式 ]; 设置 字体 的 样式 。 姑 : 国 匡 国 国 
“ 【嵌入 】: 所 选中 字体 及 样式 是 否 披 入 文档 中 。 ee 
“ 【大 小 】: 用 于 设置 文字 字体 的 大 小 。 
“ 【字母 问 距 】: 设置 文本 输入 框 中 每 个 字符 之 间 的 
间距 。 图 7-17 文本 工具 的 【属性 了 面板 


【颜色 】: 用 于 设置 文字 的 预 色 , 单 击 【 颜 色 按 钮 会 

弹出 一 个 颜色 设置 面板 ,可 以 从 中 选择 需要 的 文字 颜色 。 
【 左 对 齐 】: 设置 文本 框 中 的 文字 左 对 齐 。 

【居中 对 齐 〗: 设置 文本 框 中 的 文字 居中 对 齐 。 

【 右 对 齐 〗: 设置 文本 框 中 的 文字 右 对 齐 。 

【两 端 对 齐 】: 设置 文本 框 中 的 文字 两 端 对 齐 。 

【间距 】: 设置 文字 的 首 行 缩 进 与 行 间距 。 

【 边 距 】: 设置 文字 的 左右 缩 进 。 


C3 图 形 编辑 工具 


利用 图 形 编辑 工具 可 以 对 图 形 进 行 编辑 和 制作 ,从 而 节省 制作 动画 的 工作 量 。 在 绘 
图 形 时 合理 地 运用 编辑 工具 可 以 使 绘制 的 图 形 更 加 丰富 多 彩 , 达 到 事半功倍 的 效果 。 在 
Flash CS6 中 ,编辑 图 形 的 工具 包括 颜料 桶 工具 、 墨 水瓶 工具 、 滴 管 工具 、 橡 皮 擦 工具 、 渐 变 
变形 工具 和 任意 变形 工具 。 


7.3.1 颜料 桶 工具 
颜料 桶 工具 可 用 于 为 封闭 或 者 半 封 闭 的 图 形 区 域 填充 颜色 , 它 可 以 为 图 形 填充 单 色 , 也 
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可 以 为 图 形 填充 渐变 颜色 ,还 可 以 为 图 形 填 充 位 图 图 形 , 但 是 不 


能 为 图 形 的 线段 填充 颜色 。 六 和 

选择 颜料 彬 工具 ,在 工具 箱 下 方 会 出 现 两 个 按钮 ,如 图 7.18 所 示 。 2 

在 工具 箱 下 方 设置 了 4 种 填充 模式 供用 户 选择 。 | 

【不 封闭 空隙] 模式 : 选择 此 模式 ,只 有 在 完全 封闭 的 区 域 了 
颜色 才能 被 填充 。 2 

。 【封闭 小 空隙 了 模式 : 选择 此 模式 , 当 边 线 上 存在 小 空隙 时 2 
多 许 填充 颜色 。 _ 

。 【封闭 中 等 空隙] 模式 : 选择 此 模式 , 当 边线 上 存在 中 等 空 9 男 
隙 时 多 许 填充 颜色 。 

。[【 封 闭 大 空隙 了 模式: 选择 此 模式 , 当 边 线 上 存在 大 空隙 时 ”图 7-18 颜料 桶 工具 的 
多 许 填充 颜色 。 当 选择 [封闭 大 空隙 ] 模 式 时 ,如 果 空 隙 本 


是 中 等 空隙 或 小 空隙 ,也 可 以 填充 颜色 。 

【锁定 填充 】: 针对 渐变 色 的 填充 ,可 以 对 上 一 次 的 颜色 规律 进行 锁定 ,再 次 填充 时 
是 对 上 一 次 颜色 填充 的 延续 。 

颜料 桶 工具 的 【属性 了 面板 与 线条 工具 的 [属性 了 面板 相似 ,此 处 不 再 叙述 。 


7.3.2 墨水 瓶 工 具 


墨水 瓶 工 具 主要 用 来 改变 已 有 直线 或 曲线 的 颜色 ,粗细 和 线 型 等 属性 ,此 外 还 可 以 为 没 
有 边框 的 图 形 添加 轮廓 线 。 
墨水 瓶 工 具 的 5 属性 了 面板 与 线条 工具 的 [ 属 性 了 面板 相似 ,此 处 不 再 叙述 。 


7.3.3 滴 管 工具 


滴 管 工具 主要 用 于 从 线段 图 形 和 文本 中 吸取 填充 颜色 笔触 属性 和 文字 属性 ,然后 将 
它们 应 用 到 其 他 对 象 上 。 此 外 , 滴 管 工具 还 允许 从 位 图 上 进行 采样 作为 对 象 的 填充 内 容 。 


7.3.4 橡皮 擦 工具 


使 用 橡皮 擦 工具 可 以 擦 除 图 形 的 填充 颜色 和 线条 , 擦 除 打 散 的 位 图 ,还 可 以 一 次 性 擦 除 
图 形 的 填充 颜色 和 线条 。 

当选 择 橡 皮 擦 工具 后 ,在 工具 箱 中 会 出 现 [ 橡 皮 控 模式】【 水 龙头 【橡皮 擦 形状 3 个 
按钮 ,如 图 7-19 所 示 。 


1.【 橡 皮 擦 模式 ] 按 钮 


【橡皮 擦 模式] 按钮 主要 用 来 设置 橡皮 氛 工 具 的 不 同 控 除 模式 ， 
每 种 模式 都 有 不 同 的 氛 除 效果 ,在 单 击 【橡皮 氛 模 式 ] 按 钮 后 有 以 下 
几 种 模式 。 
图 7.19 要 皮 所 工具 。【 标 准 控 除 ]: 选择 此 模式 ,以 常规 模式 所 除 图 形 ,可 以 把 鼠 
选项 标 经 过 地 方 的 图 形 全 部 擦 除 。 
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。“【 擦 除 填 色 】: 选择 此 模式 ,可 以 把 鼠标 经 过 地 方 的 填充 颜色 擦 除 , 不 能 擦 除 线条 。 
。*【 擦 除 线条 】: 选择 此 模式 ,可 以 把 鼠标 经 过 地 方 的 线条 擦 除 ,不 能 擦 除 填充 颜色 。 
*【 擦 除 所 选 填充 】: 选择 此 模式 ,只 能 擦 除 选 择 范围 内 的 填充 颜色 ,不 能 探 除 选择 范 


围 内 的 线条 。 

“*【 内 部 氛 除 〗: 选择 此 模式 ,只 能 擦 除 鼠 标 经 过 的 第 一 个 填充 区 域内 的 颜色 ,对 其 他 
区 域 没 有 影响 。 

2.【 水 龙头 ] 按 钮 


【水 龙头 ] 按 钮 主要 用 于 将 图 形 的 填充 色 或 者 线条 一 次 性 擦 除 。 
3.【 橡 皮 擦 形状 按钮 
在 其 下 拉 列 表 中 可 以 设置 橡皮 擦 的 大 小 和 形状 。 
7.3.5 渐变 变形 工具 
在 为 图 形 填充 渐变 颜色 或 者 位 图 后 ,可 以 使 用 渐变 变形 工具 进 一 
步 编辑 图 形 填充 颜色 或 者 位 图 图 形 。 它 可 以 调整 渐变 颜色 和 位 图 的 范 
围 .方向 角度 等 ,从 而 使 图 形 的 填充 效果 更 符合 要 求 。 使 用 渐变 变形 
工具 可 以 调整 线性 渐变 、 放 射 状 渐变 和 位 图 填充 。 如 图 7-20 所 示 拖 动 。 ， ?0 计 杰 二 开 
各 个 圆 点 ,将 对 渐变 颜色 进行 调整 。 pe 


7.3.6 任意 变形 工具 


任意 变形 工具 在 编辑 图 形 时 经 常用 到 , 它 通 常用 于 改变 对 象 的 大 小 及 旋转 与 倾斜 对 象 。 
在 使 用 任意 变形 工具 选择 要 编辑 的 对 象 后 ,舞台 上 对 象 四 周 将 出 现 8 个 控制 点 ,如 图 7-21 
所 示 。 可 以 对 图 像 进行 变形 操作 ,在 工具 箱 中 会 出 现 【旋转 与 倾斜 ] 工 缩放 【扭曲 【封套 
4 个 按钮 ,如 图 7-22 所 示 。 
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图 7-21 任意 变形 工具 效果 图 7-22 任意 变形 工具 选项 


131 
MY 


站 San ar 


需要 注意 的 是 民 扭 曲 了 和 [封套 3 两 个 按钮 具有 在 所 选 对 象 是 打 散 的 图 形 或 者 是 没有 成 
组 的 矢量 图 时 才能 应 用 。 如 果 没 有 选中 任何 一 个 按钮 ,任意 变形 工具 处 于 自由 变形 模式 , 除 
了 【封套 ] 功 能 外 ,其 他 的 操作 都 可 以 进行 。 
*【 紧 贴 至 对 象 〗: 使 选择 的 图 像 吸 附 于 舞台 的 网 格 、 辅 助 线 。 
“【 旋 转 与 倾斜 ]: 此 工具 可 以 将 选中 的 对 象 进 行 任意 旋转 ,以 及 水 平 或 垂直 方向 上 的 
倾斜 变形 。 
* 【缩放 : 此 工具 可 以 将 选中 的 对 象 做 水 平 、 垂 直 缩 放 或 等 比例 缩放 。 
*【 扭 曲 ]: 此 工具 可 以 通过 调节 选取 对 象 四 周 的 节点 位 置 改变 图 形 的 形状 。 
*【 封 套 】: 可 以 通过 调节 选取 对 象 的 4 条 边线 上 的 控制 点 或 者 控制 点 上 的 控制 手柄 来 
改变 图 形 的 形状 。 


7.3.7 骨骼 工具 和 绑 定 工具 


Flash 骨骼 工具 提供 了 对 骨骼 动力 学 的 有 力 支 持 , 利 用 骨 名 工 具 可 以 实现 多 个 符号 或 
物体 的 动力 学 连 动 状态 。 创 建 骨骼 动画 有 两 种 方式 ,一 种 是 给 元 件 实例 添加 , 另 一 种 是 给 图 
形 元 件 添 加 。 在 此 以 图 形 为 例 , 选 中 舞台 上 的 图 形 , 选 择 工 具 箱 中 的 骨骼 工具 ,使 用 骨骼 工 
具 在 形状 内 单 击 并 拖 动 到 形状 内 的 其 他 位 置 ,在 拖 动 时 将 显示 骨骼 ,选择 骨 骨 绑 定 工具 ,把 
鼠标 指针 放置 到 创建 好 的 骨骼 关节 处 ,然后 按 住 鼠标 左 键 拖 动 ,此 时 图 形 周围 出 现 了 小 黄 
点 ,这 些小 黄 点 就 是 骨骼 绑 定 工 具 要 绑 定 的 点 ,将 鼠标 指针 拖 动 到 这 些 点 上 松 开 , 绑 定 就 完 
成 了 , 绑 定 后 的 骨 铝 将 通过 这 个 点 影响 图 形 形 状 ,最 后 使 用 选择 工具 拖 动 骨骼 查看 动画 效 
果 , 如 图 7-23 所 示 。 

图 7-24 所 示 为 骨 能 [属性 ] 面 板 , 在 其 中 可 以 对 骨骼 进行 坐标 及 宽 、 高 的 设置 。 


图 7-23 建立 骨骼 效果 图 7-24 骨 嵩 [属性 了 面板 
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0.4 辅助 工具 
A 

在 Flash CS6 中 提供 了 选择 工具 、 部 分 选取 工具 和 套 索 工具 ,主要 用 于 对 对 象 进行 选 
择 、 移 动 与 编辑 等 操作 。 

7.4.1 选择 工具 

使 用 选择 工具 可 以 对 图 形 进行 选择 、 移 动 与 编辑 等 操作 ,选择 选择 工具 后 ,工具 箱 下 方 


会 出 现 其 选项 按钮 ,如 图 7-25 所 示 。 | 
~ 


【 紧 贴 至 对 象 〗: 该 按钮 的 作用 是 使 选择 的 图 像 吸附 于 舞 
图 7-25 选择 工具 选项 


台 的 网 格 .辅助 线 。 

【平滑 ]: 该 按钮 的 作用 是 使 所 选择 线条 的 弯曲 处 变 得 比 
较 光滑 。 

。*“【 伸 直 】: 该 按钮 的 作用 是 使 所 选择 线条 的 弯曲 处 变 得 比较 尖锐 。 


1. 选择 对 象 

选择 选择 工具 ,在 舞台 上 单 击 进行 对 象 的 选取 , 按 住 Shift 键 可 选取 多 个 对 象 。 
2. 移动 对 象 

选择 对 象 后 , 按 住 鼠 标 左 键 将 其 拖 动 到 新 位 置 。 

3. 复制 对 象 

选择 对 象 后 ,在 按 住 Alt 键 的 同时 按 住 鼠标 左 键 将 选中 对 象 拖 动 到 新 位 置 。 


7.4.2 部 分 选取 工具 


部 分 选取 工具 通常 和 钢笔 工具 结合 使 用 ,主要 用 于 调整 图 形 的 路 径 、 编 辑 图 形 。 
选择 部 分 选取 工具 ,在 对 象 的 外 边线 上 单 击 ,对象 上 会 出 现 多 个 节点 ,通过 拖 动 节点 来 
调整 控制 线 的 长 度 和 斜率 ,从 而 改变 对 象 的 曲线 形状 。 


7.4.3 套 索 工具 


套 索 工具 主要 用 来 选择 位 图 图 形 的 一 部 分 。 在 使 用 套 索 工具 之 前 必须 将 位 图 打 散 ( 快 
捷 键 是 Ctrl 十 B) ,然后 在 图 形 上 按 住 鼠 标 左 键 按照 想 要 选择 的 图 形 轮廓 拖 动 鼠 标 拖 出 一 个 
封闭 的 区 域 ,这 样 即 可 将 该 区 域 中 的 图 形 选中 。 

在 选择 套 索 工具 后 ,工具 箱 中 会 出 现 【魔术 棒 】 民 魔术 棒 设 
旱 ] 和 [多 边 形 ]3 个 选项 按钮 ,如 图 7-26 所 示 。 

【魔术 棒 ] 按 钮 ; 以 点 选 的 方式 选择 颜色 相似 的 位 图 图 形 。 

. 【魔术 棒 设置 ] 按 钮 : 用 来 设置 魔术 棒 的 属性 。 
0 【多 边 形 ] 按 钮 : 可 以 用 鼠标 精确 地 勾画 想 要 选中 的 图 像 。 
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7.4.4 3D 旋转 工具 和 3D 平移 工具 


在 Flash CS6 中 提供 了 Z 轴 的 概念 ,也 就 是 可 以 创建 三 维 的 动画 效果 ,该 工具 仅 对 影片 
剪辑 有 效 。 

将 某 影 片 剪 辑 应 用 到 舞台 上 ,形成 实例 ,然后 选中 该 实例 ,选择 3D 旋转 工具 ,选中 的 实 
例 图 形 效 果 如 图 7-27 所 示 , 拖 动 光圈 内 的 控制 点 ,让 动画 沿 某 一 轴 旋 转 , 即 3D 旋转 。 如 果 
想 让 该 动画 在 旋转 过 程 中 有 位 置 移动 , 则 选择 3D 平移 工具 拖 动 实例 到 新 位 置 。 

3D 旋转 工具 和 3D 平移 工具 的 【属性 了 面板 一 致 ,如 图 7-28 所 示 。 


图 7-27 3D 旋转 工具 的 应 用 7-28 ”3D 旋转 工具 和 3D 平移 工具 的 [属性] 面板 


0.5 综合 应 用 


7.5.1 扇面 的 绘制 


绘制 扇面 的 操作 步骤 如 下 : 
(1) 启动 Flash, 选 择 菜 单 栏 中 的 [文件]I【 新 建 ] 命 令 , 创 建 800 像素 X 600 像素 的 
Flash 文档 ,其 余 参 数 默 认 , 如 图 7-29 所 示 。 


图 7-29 新 建文 档 


(2) 选择 图 层 1, 然 后 选择 工具 箱 中 的 矩形 工具 ,在 舞台 上 拖 动 绘制 长 条 矩形 ,并 用 油漆 
桶 工具 为 其 填充 褐色 ,用 部 分 选取 工具 选中 矩形 的 右上 角 控 制 点 em 一 
向 下 拖 动 ,同样 ,将 右 下 角 控 制 点 向 上 拖 动 ,将 矩形 调 为 左 粗 右 图 7-30 绘制 并 调整 矩形 
细 , 如 图 7-30 所 示 。 

(3) 选中 已 修改 的 矩形 ,选择 【修改 】I【 转 换 为 元 件 ] 命 令 , 将 其 转换 为 图 形 元 件 ,如 
图 7-31 所 示 。 


图 7-31 将 矩形 转换 为 图 形 元 件 


(4) 选中 舞台 上 的 元 件 实例 , 按 Ctrl 二 T 键 打开 [变形 了 面板 ,将 矩形 中 心 点 向 细 的 方向 
移动 ,并 按 图 7-32 所 示 将 旋转 角度 改 为 15 , 单 击 【 重 制 选区 并 变形 了 按钮 ,将 矩形 进行 复制 。 


136 


NM 


Web 前 端 开发 及 应 用 教程 


7% $97% 刻 铝 


图 7-32 复制 矩形 


(5) 单 击 【图 层面 板 下 方 的 [新建 图 层 ] 按 钮 创建 新 层 , 在 其 中 绘制 小 正 圆 ,以 黑白 径 向 
填充 , 放 在 扇子 骨 的 交界 处 ,如 图 7-33 所 示 。 

(6) 选择 椭圆 工具 ,以 扇子 的 中 心 为 中 心 , 按 Shift 十 Alt 键 从 中 心 点 开始 绘制 正 圆 , 然 
后 选中 正 圆 , 按 Ctrl 十 C 键 将 正 圆 复 制 ,选择 【编辑 了 民 粘 贴 到 当前 位 置 ] 命 令 ,接着 选择 工具 
箱 中 的 变形 工具 , 按 住 Shift 十 Alt 键 ,从 中 心 成 比例 缩放 ,得 到 一 个 小 圆 ,并 用 线条 工具 在 扇 
子 两 侧 绘制 直线 , 删 掉 多 余地 方 的 线 ,得 到 一 个 半 弧 形 , 如 图 7-34 所 示 。 


SN SS 


图 7-33 绘制 正 圆 图 7-34 绘制 扇面 


(7) 选择 [窗口 [颜色] 命令 ,在 [颜色 ] 面 板 上 选择 【位 图 填充 】 ,将 做 扇面 的 图 像 导入 ， 
然后 用 油漆 桶 工具 对 扇形 进行 填充 ,如 图 7-35 所 示 。 

(8) 将 扇面 选中 , 按 F8 键 将 扇面 转换 成 图 形 元 件 , 将 其 透明 度 设 为 900%。 然 后 选中 扇 
子 右 侧 的 最 后 一 根 扇 骨 ,将 它 调 到 最 上 层 。 最 后 保存 、 预 览 ,最 终 效 果 如 图 7-36 所 示 。 


图 7-35 填充 扇面 图 7-36 ”扇子 效果 图 
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7.5.2 商品 标识 的 制作 


制作 商品 标识 的 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 ] 民 新 建 ] 命 令 ,创建 420 像素 X420 像素 的 Flash 文件 ,其 余 
参数 默认 。 

(2) 选中 图 层 1 的 第 1 帧 ,选择 工具 箱 中 的 矩形 工具 ,在 舞台 上 绘制 一 个 420 像素 X 
420 像素 的 矩形 。 然 后 选择 油漆 桶 工具 ,在 【颜色 了 面板 中 选择 以 黄色 到 土 黄色 径 向 渐变 填 
充 , 如 图 7-37 所 示 。 

(3) 单 击 【图 层 3 面 板 下 方 的 【新建 图 层 ] 按 钮 ,创建 图 层 2, 然 后 选择 菜单 栏 中 的 [文件 站 
【导入 】I[ 导 入 到 舞台 ] 命 令 , 将 “橙汁 标识 ”素材 导入 到 舞台 ,并 调整 大 小 、 位 置 ,如 图 7-38 


所 示 。 


图 7-37 绘制 矩形 并 填充 图 7-38 导入 素材 并 调整 


(4) 创建 图 层 3, 选 择 工具 箱 中 的 文本 工具 ,在 舞台 中 输入 “ 鲜 橙汁 ”3 个 字 , 在 【属性 了 面 
板 中 将 文字 设置 黑体 、40 像素 .橙色 ,并 按 Ctrl 二 B 键 打 散 。 然 后 选择 墨水 瓶 工 具 , 设 置 线 
条 颜色 为 白色 ,在 文字 上 单 击 ,为 文字 添加 白色 边框 ,如 图 7-39 所 示 。 

(5) 选择 文字 ,然后 选择 菜单 栏 中 的 [修改 YI【 变 形 】I【 封 套 ] 命 令 , 文 字 四 周 出 现 控制 
点 , 按 住 控制 点 进行 拖 动 , 将 文字 变形 ,如 图 7-40 所 示 。 


图 7-39 设置 文字 图 7-40 文字 变形 


(6) 保存 预览。 


本 章 学 习 目 标 : 

名 了 解 动画 的 基础 知识 。 

局 掌握 逐 帧 动画 的 制作 。 

局 掌握 各 种 过 渡 动 画 的 制作 。 


人 .1 动画 的 基础 知识 
2 


动画 ,可 以 说 是 一 种 老少 皆 宜 的 艺术 形式 , 它 是 通过 播放 一 系列 画面 ,给 视觉 造成 连续 
变化 的 图 画 , 它 的 基本 原理 与 电影 一 样 ,都 是 利用 人 类 的 视觉 暂 留 特性 工作 的 。 


8.1.1 帧 


动画 的 形成 原理 是 多 张 图 片 连续 变换 时 ,由 于 人 有 眼 具有 视觉 停留 的 特性 ,使 人 产生 这 些 
图 片 内 容 动 起 来 的 感觉 ,Flash CS6 也 是 根据 这 个 原理 产生 动画 效果 的 。 在 整个 动画 的 制 
作 过 程 中 , 帧 是 一 个 最 基本 的 概念 ,贯穿 于 动画 制作 的 全 过 程 ,动画 就 是 通过 改变 连续 帧 的 
内 容 来 实现 的 。 


1. 帧 的 概念 


电影 是 由 一 格 一 格 的 胶片 按照 先后 顺序 播放 出 来 的 ,由 于 人 眼 有 视觉 停留 现象 ,这 一 格 
一 格 的 胶片 按照 一 定 速度 播放 出 来 看 起 来 就 “ 动 * 了 ,动画 制作 利用 的 也 是 这 一 原理 ,而 
Flash 中 的 “ 帧 "就 相当 于 一 格 一 格 的 胶片 。 


2. 帧 的 分 类 


在 Flash CS6 中 动画 制作 是 通过 改变 连续 帧 的 内 容 来 实现 的 。 首 先 要 了 解 帧 的 分 类 ， 
帧 一 共 分 为 3 类 , 即 关 键 帧 .过 渡 帧 和 空白 关键 帧 。 

1) 关键 帧 

关键 帧 在 制作 动画 的 过 程 中 是 非常 关键 的 ,只 有 定义 了 关键 帧 和 动画 的 属性 ,才能 让 
Flash 自动 完成 动画 过 程 。 关 键 帧 就 是 定义 动画 的 起 始点 和 终结 点 ,也 就 是 说 ,动画 的 起 始 
点 和 终结 点 都 是 关键 帧 。 
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2) 过 渡 帧 

在 定义 了 Flash 的 起 始 关键 帧 和 终结 关键 帧 之 后 ,在 起 始 和 终结 关键 帧 之 内 的 帧 被 称 
为 过 渡 帧 。 过 渡 帧 是 具体 动画 实现 的 详细 过 程 图 . 它 具 体 体现 了 动画 变化 过 程 。 当 单 击 过 
渡 帧 时 ,在 工作 区 将 预览 这 一 帧 的 动画 情况 。 

3) 空白 关键 帧 

在 一 个 关键 帧 里 面 什么 对 象 也 没有 添加 ,这 种 关键 帧 称 为 空白 关键 帧 。 单 击 鼠 标 左 键 ， 
选 定 一 个 影 格 ,然后 右 击 ,在 弹出 的 快捷 菜单 中 选择 【插入 空白 关键 帧 3 命令 ,这 样 的 关键 帧 
就 是 空白 关键 帧 。 


3. 帧 操作 


1) 插入 帧 
选择 菜单 栏 中 的 【插入 了 区 时 间 轴 了 民 帧 3 命令 或 按 F5 键 ,可 以 在 时 间 轴 上 插入 一 个 
普通 帧 。 
选择 菜单 栏 中 的 【插入 了 区 时 间 轴 了 民 关 键 帧 3 命令 或 按 F6 键 ,可 以 在 时 间 轴 上 插入 
一 个 关键 帧 。 
选择 菜单 栏 中 的 [插入 】IK 时 间 轴 】I【 空 白 关键 帧 3 命令 ,可 以 在 时 间 轴 上 插入 一 个 空 
白 关键 帧 。 
2) 选择 帧 
选择 菜单 栏 中 的 【编辑 IK 时 间 轴 】I【 选 择 所 有 帧 ] 命 令 , 可 以 选中 时 间 轴 上 的 所 
有 帧 。 
在 时 间 轴 上 单 击 要 选择 的 帧 , 帧 变 为 蓝 色 。 
在 按 住 Ctrl 键 的 同时 用 鼠标 单 击 要 选择 的 帧 ,可 以 选择 多 个 不 连续 的 帧 。 
在 按 住 Shift 键 的 同时 用 鼠标 单 击 要 选择 的 两 个 帧 ,可 以 选择 这 两 个 帧 之 间 的 所 
有 帧 。 

3) 删除 帧 

选中 时 间 轴 上 要 删除 的 帧 ,选择 菜单 栏 中 的 [编辑 【时间 轴 [删除 帧 命令 或 按 Shift 十 
F5 键 ,都 可 以 将 选 定 的 帧 删除 。 在 一 个 帧 被 删除 后 ,后 面 的 帧 将 自动 向 前 移动 。 

4) 移动 帧 

在 选中 一 个 帧 或 多 个 帧 后 ,被 选中 的 帧 反 亮 显 示 , 按 住 鼠 标 左 键 移动 所 选 帧 到 目标 
位 置 。 


8.1.2 时 间 轴 与 图 层 
1. 时 间 轴 


时 间 轴 是 Flash 编辑 动画 的 主要 工具 ,是 用 于 组 织 和 控制 动画 中 的 帧 和 层 在 一 定时 间 
内 播放 的 坐标 轴 。 

【时 间 轴 面板 由 【图 层面 板 和 时 间 轴 组 成 ,如 图 8-1 所 示 。 

【图 层面 板 的 中 间 部 分 是 图 层 显 示 区 ,文档 中 的 所 有 图 层 都 会 在 此 处 显示 ,上 面 的 图 层 
覆盖 下 面 的 图 层 ,图 层 类 型 等 与 图 层 相关 的 内 容 都 会 在 此 处 显示 。 
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图 8-1 【时 间 轴 面板 


【眼睛 图标 : 单 击 此 图 标 ,可 以 显示 /隐藏 图 层 中 的 内 容 。 

【 锁 状 了 图 标 : 单 击 此 图 标 ,可 以 锁定 或 解锁 图 层 。 

【 线 框 ] 图 标 : 单 击 此 图 标 ,可 以 将 图 层 中 的 内 容 以 线 框 的 方式 显示 。 
【新 建 图 层 ] 按 钮 : 用 于 创建 新 图 层 。 

【新 建文 件 夹 ] 按 钮 : 用 于 创建 图 层 文件 夹 。 

【 圳 除 ] 按 钮 ; 用 于 删除 无 用 的 图 层 。 

右 侧 时 间 轴 中 间 部 分 对 应 图 层 显 示 各 图 层 应 用 的 帧 , 即 各 图 层 的 动画 状态 。 红 色 为 
播放 头 , 它 所 在 的 位 置 即 当前 播放 位 置 ,也 就 是 当前 显示 的 那 一 帧 。 

【 帧 居中 了 : 把 当前 的 帧 移动 到 时 间 轴 窗口 的 中 间 ,以 方便 操作 。 

【循环 〗: 在 规定 帧 内 循环 播放 。 

【绘图 纸 外 观 】: 同时 查看 当前 帧 与 前 后 若干 帧 里 的 内 容 , 以 方便 前 后 多 帧 对 照 
编辑 。 

【绘图 纸 外 观 轮廓 】: 在 标记 范围 内 的 帧 上 的 对 象 将 以 轮廓 线 的 形式 同时 显示 在 舞 
从 上 于。 

【编辑 多 帧 】: 单 击 此 按钮 ,绘图 纸 标记 范围 内 的 帧 上 的 对 象 将 同时 显示 在 舞台 中 ， 
可 以 同时 编辑 所 有 的 对 象 。 

【修改 标记 】: 单 击 此 按钮 会 弹出 下 拉 菜 单 ,其 中 有 5 个 
命令 ,如 图 8-2 所 示 。 

*【 始 终 显示 标记 命令 : 在 时 间 轴 标尺 上 总 是 显示 出 
绘图 纸 标记 。 

【 锚 定 标记 命令 ; 将 锁定 绘图 纸 标记 的 显示 范围 ， | 
移动 播放 头 不 会 改变 显示 范围 。 图 8-2 修改 标记 下 拉 菜 单 
【标记 范围 2] 命 令 : 绘图 纸 标记 显示 范围 从 当前 帧 

的 前 两 帧 开始 ,到 当前 帧 的 后 两 帧 结束 。 

【标记 范围 5] 命 令 : 绘图 纸 标记 显示 范围 从 当前 帧 的 前 5 帧 开始 ,到 当前 帧 的 后 
5 帧 结束 。 

【标记 整个 范围 〗: 绘图 纸 标记 显示 范围 为 时 间 轴 中 的 所 有 帧 。 

【当前 帧 】: 动画 正在 播放 的 那 一 帧 。 

【 帧 速率 】: 动画 播放 的 速率 , 即 每 秒 钟 播放 的 帧 数 (fps) ,可 以 打开 文档 [属性 了 面板 
进行 设置 ,默认 值 为 12fps。 

【动画 时 间 】: 当前 动画 所 用 的 时 间 。 
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2. 图 层 


图 层 在 Flash 中 是 一 个 相当 重要 的 动画 制作 手段 ,尤其 是 在 创建 复杂 的 动画 时 具有 很 
大 的 作用 。 利 用 Flash CS6 的 图 层 技术 可 以 创建 许多 动画 的 特殊 效果 ,并 且 对 一 个 图 层 上 
的 对 象 进行 编辑 ,粘贴 和 重新 定位 的 操作 不 会 影响 到 其 他 图 层 。 

那么 什么 才 是 图 层 呢 ? 一 个 图 层 犹 如 一 张 透明 的 纸 , 在 上 面 可 以 绘制 任何 事物 或 书写 
任何 文字 ,所 有 的 图 层 释 在 一 起 ,就 组 成 了 一 幅 完 整 的 画 。 层 有 两 大 特点 : 除了 画 有 图 形 或 
文字 的 地 方 ,其 他 部 分 都 是 透明 的 ,也 就 是 说 ,下 层 的 内 容 可 以 通过 透明 的 这 部 分 显示 出 来 ; 
图 层 又 是 相对 独立 的 ,修改 其 中 的 一 层 不 会 影响 到 其 他 层 。 使 用 图 层 最 大 的 好 处 就 是 可 以 
将 不 同类 型 的 内 容 放 在 不 同 的 图 层 中 ,便于 管理 。 

图 层 位 于 【时 间 轴 面板 的 左边 ,如 图 8-1 所 示 。 图 层 是 一 层 一 层 向 上 苍 的 ,在 默认 情况 
下 新 建 的 图 层 位 于 旧 的 图 层 之 上 ,不 过 可 以 通过 使 用 鼠标 按 住 上 下 拖 动 来 修改 这 种 排列 ,在 
图 层 名 称 上 双击 可 以 直接 修改 名 称 。 

图 层 可 以 分 为 普通 图 层 ` 遮 单 图 层 和 引导 图 层 , 其 中 引导 图 层 又 分 为 普通 引导 图 层 和 运 
动 引导 图 层 两 种 。 


8.1.3 元 件 的 创建 与 编辑 


元 件 是 指 在 Flash 创作 环境 中 或 使 用 Button (AS 2. 0) SimpleButton (AS 3. 0) 和 
MovieClip 类 创建 过 的 图 形 、 按 钮 或 影片 剪辑 ,然后 可 以 在 整个 文档 或 其 他 文档 中 重复 使 
用 ,元 件 可 以 包含 从 其 他 应 用 程序 中 导入 的 插图 。 用 户 创 建 的 任何 元 件 都 会 自动 成 为 当前 
文档 的 库 的 一 部 分 。 

在 Flash 中 所 产生 的 一 切 运 动 (形状 变形 除外 ) 都 要 以 元 件 的 形式 来 实现 ,所 以 在 设 
计 和 运动 动画 之 前 要 将 编辑 好 的 对 象 转 化 为 元 件 。 使 用 元 件 来 设置 动画 除了 方便 管理 和 
调试 外 ,最 重要 的 是 如 果 一 个 对 象 要 重复 使 用 ,只 需 多 次 从 库 中 调用 , 且 不 会 增加 文件 的 
体积 。 

元 件 就 像 是 给 图 形 套 了 一 件 衣服 ,然后 衣服 有 了 分 身 术 的 魔法 ,让 用 户 可 以 无 限制 地 让 
同一 个 图 形 多 次 出 现在 舞台 上 ,而 且 可 以 随便 改变 大 小 ,图 形 的 清晰 度 是 不 变 的 。 

在 文档 中 使 用 元 件 可 以 显著 减 小 文件 的 大 小 ,保存 一 个 元 件 的 几 个 实例 比 保存 该 元 件 
内 容 的 多 个 副本 占用 的 存储 空间 小 。 例 如 ,通过 将 背景 图 像 这 样 的 静态 图 形 转 换 为 元 件 , 然 
后 重新 使 用 它们 ,可 以 减 小 文件 的 大 小 。 使 用 元 件 还 可 以 加 快 SWF 文件 的 回放 速度 ,因为 
元 件 只 需 下 载 到 Flash Player 中 一 次 。 

在 创作 或 运行 时 ,可 以 将 元 件 作 为 共享 库 资源 在 文档 之 间 共 享 。 对 于 运行 时 共享 资源 ， 
可 以 把 源 文档 中 的 资源 链接 到 任意 数量 的 目标 文档 中 ,而 无 须 将 这 些 资源 导入 到 目标 文 
档 中 。 对 于 创作 时 共享 的 资源 ,可 以 用 本 地 网 络 上 可 用 的 其 他 任何 元 件 更 新 或 替换 一 个 
元 件 。 


1. 元 件 与 实例 


元 件 是 Flash 中 最 重要 的 也 是 最 基本 的 元 素 , 它 在 Flash 中 对 文件 的 大 小 和 交互 能 力 
起 着 重要 的 作用 。 元 件 是 位 于 当前 动画 库 中 可 以 反复 使 用 的 图 形 、 按 钮 动画 或 声音 资源 。 
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制作 的 元 件 或 从 外 部 导入 的 文件 都 会 保存 在 库 中 。 在 使 用 元 件 的 时 候 可 以 将 元 件 从 库 中 拖 
至 工作 区 或 其 他 元 件 中 ,这 些 被 拖 出 来 的 元 件 称 为 实例 ,如 图 8-3 所 示 。 


图 8-3 元 件 1 与 其 实例 


元 件 的 应 用 会 使 动画 制作 十 分 方便 、 轻 松 , 在 制作 一 个 动画 的 过 程 中 ,如 果 对 使 用 的 
图 像 元 素 重 新 进行 编辑 ,那么 还 要 对 使 用 了 该 图 像 元 素 的 复制 品 进行 编辑 。 如 果 使 用 了 
元 件 ,就 不 会 出 现 这 样 的 重复 操作 了 ,只 要 将 在 动画 中 重复 出 现 的 元 素 制 作成 元 件 , 当 使 用 
元 件 时 ,将 元 件 从 库 中 拖 到 工作 区 就 可 以 了 。 当 元 件 被 重新 编辑 后 ,所 有 的 实例 都 会 随 之 
改变 。 

除 此 之 外 ,合理 地 使 用 元 件 还 可 以 减 小 影片 文件 的 大 小 。 在 制作 影片 的 过 程 中 ,如 果 每 
次 都 使 用 独立 的 图 形 对 象 , Flash 将 存储 所 有 图 形 对 象 的 信息 ,这 样 会 使 动画 的 大 小 非常 
大 ,但 是 如 果 将 图 形 对 象 制作 成 元 件 ,无 论 工作 区 中 有 多 少 个 同一 元 件 的 实例 ,在 Flash 
Player 中 都 只 载 入 一 次 元 件 内 容 , 所 以 使 用 了 元 件 的 影片 文件 会 很 小 。 例 如 ,在 工作 区 中 应 
用 一 个 元 件 ,输出 后 的 文件 大 小 为 5KB, 在 工作 区 中 应 用 3 个 相同 的 元 件 ,输出 的 文件 大 小 
仍 为 5KB, 但 是 如 果 在 工作 区 中 拖 入 3 个 图 形 , 则 输出 文件 的 大 小 为 15KB。 

同一 个 元 件 在 不 同 的 实例 中 可 以 有 一 些 不 同 的 属性 ,如 大 小 、 颜 色 .旋转 的 角度 .透明度 
等 ,改变 实例 中 的 属性 并 不 影响 库 中 的 元 件 ; 即使 用 户 对 实例 进行 修改 ,Flash 仅 需要 存储 
一 些 与 元 件 有 差别 的 信息 ,因此 可 以 使 影片 文件 的 输出 大 小 最 小 。 


2. 元 件 的 分 类 


根据 功能 和 使 用 环境 的 不 同 ,元 件 共 有 3 种 形式 , 即 图 形 、 按 钮 和 影片 剪辑 。 

图 形 元 件 表示 的 是 用 于 创建 可 反复 使 用 的 图 形 , 它 可 以 是 静止 图 片 ,也 可 以 是 由 多 个 帧 
组 成 的 动画 。 它 的 特点 是 拥有 相对 独立 的 编辑 区 域 .如 果 将 其 调用 到 场景 中 ,会 受到 场景 帧 
约束 。 

按钮 元 件 用 于 创建 动画 的 控制 按钮 ,以 响应 鼠标 的 按 下 、 单 击 等 事件 。 按 钮 元 件 包括 
“ 弹 起 ”“ 指 针 经 过 ”“ 按 下 ”和 “点 击 ”4 种 状态 ,在 按钮 元 件 的 不 同 状态 上 创建 不 同 的 内 容 ， 
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每 种 状态 都 可 以 通过 图 形 、 声 音 来 定义 。 在 创作 按钮 元 件 时 ,还 可 以 设计 出 各 种 互动 效果 ， 
使 按钮 对 鼠标 操作 进行 相应 的 响应 。 

影片 剪辑 元 件 表示 的 是 影片 中 的 小 片段 . 它 可 以 是 静态 的 图 形 ,也 可 以 是 一 段 动画 ， 
可 以 在 影片 中 增加 ActionScript、 动 画 、 声 音 和 其 他 影片 。 每 个 影片 都 有 自己 独立 的 时 间 
轴 , 可 以 独立 播放 。 当 播放 主动 画 时 ,影片 元 件 也 在 循环 播放 , 它 不 会 受到 场景 中 帧 的 
约束 。 


3. 元 件 的 创建 


创建 元 件 的 方法 有 两 种 ,一 种 是 直接 创建 , 另 一 种 是 转换 。 

1) 直接 创建 

选择 菜单 栏 中 的 【插入 了 民 新 建 元 件 ] 命 令 ( 或 按 Ctrl 十 F8 键 ), 打 开 【 创 建新 元 件 ] 对 话 
框 ,在 该 对 话 框 的 名称] 文本 框 中 输入 创建 元 件 的 名 称 ,在 [类 型 3 选项 区 中 可 以 选 定 元 件 的 
类 型 , 单 击 【确定 了 按钮 后 ,进入 图 形 元 件 的 编辑 状态 ,绘制 相应 的 图 形 , 单 击 工作 区 中 的 标题 
栏 * 场 景 1" 切 换 到 主场 景 中 攻 库 了 面板 中 就 出 现 了 创建 的 图 形 元 件 。 

2) 将 对 象 转 换 为 元 件 

使 用 工具 箱 中 的 选择 工具 选中 对 象 ,然后 选择 菜单 栏 中 的 [修改 】I【 转 换 为 元 件 ] 命 令 
(或 者 按 F8 键 ) ,在 打开 的 【转换 为 元 件 ] 对 话 框 中 输入 名 称 , 选 择 元 件 的 类 型 , 单 击 【确定 】 
按钮 ,此 时 【 库 ] 面 板 中 就 会 出 现 刚 转 换 的 元 件 。 


4. 元 件 的 编辑 


元 件 的 编辑 可 以 在 多 种 模式 下 进行 ,一 种 是 一 般 的 元 件 编辑 模式 , 另 一 种 是 在 当前 环境 
下 进行 编辑 ,还 有 一 种 是 在 新 窗口 中 进行 编辑 。 

1) 在 元 件 编辑 模式 下 进行 编辑 

选中 要 编辑 的 元 件 , 然 后 右 击 ,在 弹出 的 快捷 菜单 中 选择 [编辑 ] 命 令 , 进 入 元 件 编辑 
模式 。 

2) 在 当前 编辑 模式 下 进行 

右 击 元 件 实例 ,在 弹出 的 快捷 菜单 中 选择 【在 当前 位 置 上 编辑 】 命 令 ,在 当前 窗口 中 其 他 
对 象 变 灰 ,被 编辑 元 件 的 名 称 出 现在 舞台 项 端的 信息 栏 中 。 

3) 在 新 窗口 中 编辑 

在 场景 中 右 击 某 实例 ,在 弹出 的 快捷 菜单 中 选择 [新 建 窗口 编辑 ] 命 令 ,被 编辑 的 元 件 名 
称 将 出 现在 舞台 顶端 的 信息 栏 中 。 


5. 3 种 元 件 的 相同 点 与 区 别 


1) 相同 点 

3 种 元 件 的 相同 点 是 都 可 以 重复 使 用 , 且 当 需要 对 重复 使 用 的 元 素 进行 修改 时 只 需 编 
辑 元 件 ,而 不 必 对 所 有 该 元 件 的 实例 一 一 进行 修改 ,Flash 会 根据 修改 的 内 容 对 所 有 元 件 的 
实例 进行 更 新 。 

2) 区 别 及 应 用 中 需 注 意 的 问题 

(1) 影片 剪辑 元 件 、 按 钮 元 件 和 图 形 元 件 最 主要 的 差别 在 于 影片 剪辑 元 件 和 按钮 元 件 
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的 实例 都 可 以 加 入 动作 语句 ,图 形 元 件 的 实例 则 不 能 ; 影片 剪辑 元 件 的 关键 帧 可 以 加 入 动 
作 语 句 , 按 钮 元 件 和 图 形 元 件 则 不 能 。 

(2) 影片 剪辑 元 件 和 按钮 元 件 中 都 可 以 加 入 声音 ,图形 元 件 则 不 能 。 

(3) 影片 剪辑 元 件 的 播放 不 受 场景 时 间 线 长 度 的 制约 , 它 有 元 件 自身 独立 的 时 间 线 ， 
按钮 元 件 独特 的 4 帧 时 间 线 并 不 自动 播放 ,只 是 响应 鼠标 事件 ; 图 形 元 件 的 播放 完全 受制 
于 场景 时 间 线 。 

(4) 影片 剪辑 元 件 在 场景 中 按 回 车 键 测试 时 看 不 到 实际 播放 效果 ,只 能 在 各 自 的 编辑 
环境 中 看 效果 ,而 图 形 元 件 在 场景 中 可 即时 观看 ,可 以 实现 所 见 即 所 得 的 效果 。 

(5) 3 种 元 件 在 舞台 上 的 实例 都 可 以 在 【属性 面板 中 相互 改变 其 行为 ,也 可 以 相互 交 
换 实例 。 

(6) 在 影片 剪辑 元 件 中 可 以 说 套 另 一 个 影片 剪辑 元 件 , 在 图 形 元 件 中 也 可 以 赃 套 男 一 
个 图 形 元 件 , 但 在 按钮 元 件 中 不 能 嵌 套 另 一 个 按钮 元 件 ,3 种 元 件 可 以 相互 嵌 套 。 

8.1.4 场景 概述 

在 设计 Flash 动画 时 ,如 果 设 计 的 动画 比较 复杂 ,动画 时 间 较 长 ,会 导致 图 层 的 操作 非 
常 烦琐 ,此 时 可 以 将 动画 分 成 几 段 ,分 别 放置 在 不 同 的 场景 中 来 制作 。 

1. 场景 的 概念 

场景 可 以 看 成 是 一 段 相对 独立 的 动画 , 当 动画 中 有 多 个 场景 时 ,整个 动画 会 按照 顺序 播 
放 , 当 然 , 也 可 以 用 脚本 程序 来 控制 场景 的 播放 顺序 。 

在 Flash 中 ,所 有 的 动画 制作 都 是 在 “场景 "中 实现 的 。 当 新 建 Flash 文档 时 , Flash 自 
动 创建 一 个 名 称 为 “场景 1” 的 场景 。 如 果 设 计 的 是 一 个 简单 的 小 动画 ,只 需要 使 用 一 个 
场景 就 可 以 了 ,如 果 设 计 的 是 一 个 比较 复杂 的 动画 ,一 个 场景 是 不 够 的 ,可 能 需要 多 个 场 
景 。 例 如 ,网 上 的 大 部 分 Flash 作品 在 开始 的 时 候 都 有 一 个 Loading 场景 来 显示 下 载 的 
速度 。 

2. 场景 的 创建 

选择 菜单 栏 中 的 [插入 】I【 场 景 I 命令 ,可 以 创建 一 个 新 的 村 
场景 。 画 场 最 1 

3. 编辑 场景 

选择 菜单 栏 中 的 [窗口 I【 其 他 面板 3I【 场 景 ] 命 令 , 可 以 
打开 【场景 了 面板 ,如 图 8-4 所 示 。 


在 【场景 3 面板 中 可 以 对 场景 进行 复制 .添加 、 重 命名 、 删 
除 、 更 改 播放 顺序 等 操作 。 


8.1.5 动画 的 类 型 
以 前 制作 动画 的 过 程 非常 复杂 ,需要 将 每 一 帧 上 的 画面 全 部 绘制 出 来 ,有 了 Flash 之 后 


UA 


图 8-4 【场景 面板 
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制作 动画 变 得 简单 了 ,我 们 只 需要 将 动画 面 面 中 的 关键 部 分 绘制 出 来 ,中 间 的 动画 过 程 可 以 
交 给 Flash 完成 ,从 而 大 大 减少 了 制作 动画 的 工作 量 。 因 此 ,在 Flash 动画 的 制作 过 程 中 ， 
根据 制作 方法 和 生成 原理 的 不 同 ,可 以 将 Flash 动画 分 成 逐 帧 动画 和 补 间 动 画 两 种 ,而 补 间 
动画 又 可 以 分 为 动画 补 间 动画 和 形状 补 间 动画 两 种 。 

(1) 逐 帧 动画 : 逐 帧 动画 是 一 种 传统 的 动画 形式 ,制作 起 来 比较 烦琐 。 此 类 动画 完 
全 由 关键 帧 组 成 ,每 个 关键 帧 都 可 以 进行 单独 编辑 , 它 需要 用 户 对 物体 运动 的 基本 规律 
有 深 的 了 解 ,并 且 具 有 一 定 的 绘图 基础 。 利 用 逐 帧 动画 可 以 获得 任意 的 动画 效果 ,但 是 
由 于 每 个 关键 帧 都 要 进行 编辑 ,因而 逐 帧 动画 的 工作 量 很 大 ,而 且 制 作出 米 的 作品 文件 容 
量 也 很 大 。 

(2) 动画 补 间 动 画 ; 动画 补 间 动 画 可 以 实现 对 象 的 移动 、 缩 放 、 旋 转 、 变 色 等 动画 效果 ， 
构成 动画 补 间 动 画 的 元 素 是 元 件 。 

(3) 形状 补 间 动画 , 形状 补 间 动 画 可 以 完成 图 形 的 移动 缩放、 形状 渐变、 色彩 渐变 等 ， 
它 的 作用 对 象 只 能 是 图 形 。 和 一 般 的 动画 补 间 动 画 有 所 不 同 , 在 使 用 形状 变形 时 不 需要 把 
绘制 好 的 形状 转换 为 元 件 ,如 果 要 使 用 元 件 实例 创建 形状 补 间 动 画 , 需 要 将 该 实例 通过 按 
Ctrl 二 B 键 分 离 后 才 可 以 实现 。 


6.2 逐 帧 动画 


逐 帧 动画 是 Flash 动画 中 最 基本 的 动画 形式 ,用 户 只 要 掌握 了 插 和 人 关键 帧 的 方法 就 
可 以 制作 逐 帧 动画 ,但 制作 一 个 好 的 逐 帧 动画 需要 掌握 物体 的 运动 规律 和 具有 好 的 绘画 
基础 。 


8.2.1 直接 导入 生成 逐 帧 动画 


用 户 可 以 将 绘制 好 的 JPG、PNG 等 格式 的 静态 图 片 连续 导入 到 Flash 中 来 建立 一 段 逐 
帧 动画 ,也 可 以 通过 导入 GIF 序列 图 像 、 swf 动画 文件 等 来 建立 一 段 逐 帧 动画 。 


8.2.2 创建 逐 帧 动画 


在 Flash 中 ,从 第 1 帧 开始 就 建立 关键 帧 ,然后 利用 鼠标 或 者 手写 板 在 Flash 中 绘制 一 
帧 帧 的 矢量 图 形 来 生成 逐 帧 动画 ,也 可 以 用 文字 来 做 帧 中 的 对 象 , 实 现 文字 的 跳跃 .闪烁 等 
特效 。 图 8-5 所 示 为 逐 帧 动画 的 时 间 轴 。 


[2 UW, FR, PR 


8-5 逐 帧 动画 的 时 间 轴 
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@.3 动画 补 间 动 画 


补 间 动 画 是 相对 于 逐 帧 动画 而 言 的 , 它 是 事先 定义 好 动画 的 起 点 和 终点 的 内 容 ,然后 由 
Flash 自动 完成 两 点 之 间 的 动画 过 渡 。 与 逐 帧 动画 相 比 , 补 间 动 画 不 需要 一 帧 一 帧 地 绘 
动画 ,避免 了 逐 帧 动画 制作 烦琐 、 容 量 过 大 等 缺点 。 

动画 补 间 动 画 是 Flash 中 最 常用 的 一 种 动画 形式 ,使 用 动画 补 间 动 画 可 以 制作 出 对 象 
的 移动 .旋转 、 色 彩 变化 、 放 大、 缩小 、 透 明度 变化 等 动画 ,在 动画 补 间 动画 中 使 用 的 对 象 只 能 
是 元 件 ,包括 影片 剪辑 元 件 、 图 形 元 件 .按钮 元 件 等 ,除了 元 件 ,其 他 元 素 都 不 能 创建 动画 补 
间 动 画 ,矢量 图 .位 图 等 都 必须 要 转换 成 元 件 才 可 以 用 来 制作 动画 补 间 动 画 。 

在 制作 动画 补 间 动 画 时 ,每 一 段 动画 中 只 能 使 用 一 个 对 象 ,如 果 在 同一 时 间 要 实现 多 个 
不 同 对 象 的 运动 ,可 以 使 用 多 个 层 来 实现 多 个 对 象 的 动画 补 间 。 


8.3.1 动画 补 间 动 画 的 制作 


在 Flash CS6 中 创建 动画 补 间 动 画 的 方法 如 下 : 

在 动画 的 两 个 关键 帧 之 间 任 意 选 择 一 帧 ,然后 右 击 , 在 弹出 的 快捷 菜单 中 选择 【创建 传 
统 补 间 了 命令 ,就 可 以 创建 出 动画 补 间 动 画 。 动 画 补 间 动 画 的 过 渡 帧 底 纹 为 浅 紫色 ,显示 箭 
头 ,从 开始 帧 指向 结束 帧 ,如 图 8-6 所 示 。 


DLL 5 FE EE 


图 8-6 动画 补 间 动 画 的 时 间 轴 


8.3.2 动画 补 间 动 画 的 参数 设置 


在 创建 动画 补 间 动 画 后 ,在 [时 间 轴 面板 上 单 击 
动画 的 起 始 帧 ,打开 【属性 了 面板 ,在 其 中 可 以 看 到 
图 8-7 所 示 的 选项 。 

(1)【 缓 动 ] 选 项 : 该 选项 用 于 设置 对 象 的 运动 方 
式 , 即 加 速 运动 或 减速 运动 。 在 “0 旁边 有 一 个 滑动 
条 , 单 击 后 上 下 拉动 滑动 条 或 填 人 具体 的 数据 ,动画 
补 间 动 画 会 随 之 发 生 相 应 的 变化 。 

QO 输入 一 1 一 一 100 之 间 的 数值 ,动画 运动 的 速 
度 由 慢 到 快 ,向 着 运动 结束 的 方向 加 速 补 间 。 

四 输入 1 一 100 之 间 的 数值 ,动画 运动 的 速度 由 
快 到 慢 ,向 着 运动 结束 的 方向 减速 补 间 。 图 87 动画 补 间 动 画 的 [属性 面板 
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@ 在 默认 情况 下 , 补 间 帧 之 间 的 变化 速率 是 不 变 的 , 即 “0”。 

(2)【 旋 转 〗 选 项 : 该 选项 用 于 设置 运动 对 象 的 旋转 方式 ,在 其 下 拉 列 表 框 中 有 4 个 
选项 。 

中 无 : 禁止 元 件 实例 旋转 。 

@ 自动 : 使 元 件 实例 根据 起 始 帧 与 结束 帧 上 的 放置 角度 自动 进行 旋转 。 

@ 顺 时 针 : 使 元 件 实例 在 运动 时 顺 时 针 旋 转 相 应 的 圈 数 。 

@ 道 时 针 : 使 元 件 实例 在 运动 时 逆 时 针 旋 转 相 应 的 圈 数 。 

(3)【 调 整 到 路 径 ] 复 选 框 : 勾 选 该 复 选 框 ,将 对 象 的 基线 调整 到 运动 路 径 , 此 项 功能 是 
用 于 运动 引导 动画 的 。 

(4)【 同 步 】 复 选 框 : 匀 选 该 复 选 框 ,可 以 使 图 形 元 件 实例 内 部 动画 的 播放 和 舞台 中 的 
动画 播放 同步 。 

(5)【 贴 紧 ] 复 选 框 : 勾 选 该 复 选 框 ,可 以 根据 注册 点 将 动画 对 象 吸附 到 运动 路 径 上 ,此 
项 功能 也 是 用 于 运动 引导 动画 的 。 

(6)【 缩 放 了 复 选 框 : 勾 选 该 复 选 框 ,对 象 在 动画 过 程 中 可 以 改变 比例 。 


.4 形状 补 间 动 画 


形状 补 间 动 画 是 补 间 动 画 的 另 一 种 表现 形式 , 它 的 作用 是 使 一 种 物体 的 形状 变化 为 
另外 一 种 形状 ,在 形状 变化 的 同时 颜色 、 位 置 等 也 可 以 随 之 变化 。 形 状 补 间 动画 与 动画 
补 间 动 画 的 不 同 在 于 形状 补 间 动 画 是 对 两 个 不 同 的 图 形 对 象 进 行 补 间 ,而 动画 补 间 动画 
是 针对 同一 个 对 象 的 不 同 变化 来 进行 补 间 ,因此 在 形状 补 间 动 画 中 作用 的 对 象 只 能 是 图 
形 , 所 以 在 使 用 形状 变形 时 无 须 也 不 能 把 绘制 好 的 形状 转换 为 元 件 , 如 果 要 使 用 现 有 
的 元 件 或 文字 创建 形状 补 间 动 画 , 要 先 将 元 件 实例 或 者 文字 按 Ctrl 十 B 键 分 离 后 才能 

虽然 形状 补 间 动 画 也 能 实现 对 象 的 移动 ` 放 大、 缩小 及 色彩 、 透 明度 等 变化 ,但 是 在 通常 
情况 下 不 会 使 用 形状 补 间 动 画 来 实现 这 些 变化 ,而 是 通过 动画 补 间 动 画 来 实现 ,这 是 因为 使 
用 形状 补 间 动画 创建 动画 ,Flash 在 保存 时 会 记录 每 一 个 关键 帧 上 的 图 形 , 文 件 体积 较 大 ， 
而 动画 补 间 动 画 通常 使 用 的 是 元 件 ,Flash 只 要 记录 一 次 就 可 以 了 ,所 以 在 制作 动画 时 如 果 
能 用 动画 补 间 实 现 最 好 不 要 用 形状 补 间 实现 。 


8.4.1 形状 补 间 动 画 的 制作 


在 Flash CS6 中 创建 形状 补 间 动 画 的 方法 如 下 : 

在 动画 的 两 个 关键 帧 之 间 任意 选择 一 帧 ,然后 右 击 , 在 弹出 的 快捷 菜单 中 选择 【创建 补 
间 形 状 了 命令 ,就 可 以 创建 出 形状 补 间 动 画 。 其 过 渡 帧 呈 浅 绿色 底 纹 ,显示 箭头 ,从 开始 帧 指 
向 结束 帧 ,图 8-8 所 示 为 形状 补 间 动画 的 时 间 轴 。 
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图 8-8 形状 补 间 动 画 的 时 间 轴 


8.4.2 形状 补 间 动 画 的 参数 设置 


在 创建 形状 补 间 动 画 后 ,在 【时 间 轴 面板 上 单 击 动画 的 起 始 帧 ,打开 【属性 了 面板 ,在 其 
中 可 以 看 到 如 图 8-9 所 示 的 选项 。 
(1)【 绥 动 ] 选 项 : 这 个 选项 的 作用 和 动画 补 间 
动画 的 一 样 ,在 此 不 再 熬 述 。 
(2) 【混合 〗 选 项 : 作用 是 设置 动画 中 间 的 形状 
变化 模式 。 
。 分布 式 : 使 创建 的 动画 的 中 间 形 状 比 较 平 滑 
和 不 规则 。 
。 角形 : 使 创建 的 动画 的 中 间 形 状 保留 明显 的 
角 和 直线 。 


8.4.3 添加 形状 提示 


虽然 形状 补 间 动 画 制作 起 来 很 简单 ,但 是 当前 后 图 形 差异 比较 大 时 变形 效果 较 差 。 为 
了 能 使 变形 效果 按照 自己 的 意愿 变化 ,可 以 使 用 [修改 YI【 形 状 3I【 添 加 形状 提示 3 功能 ,在 起 
始 帧 和 结束 帧 位 置 添加 一 些 相应 的 参考 点 ,使 对 象 之 间 的 变形 不 是 随机 的 ,而 是 有 规律 的 ， 
如 图 8-10 所 示 。 


图 8-9 形状 补 间 动 画 的 [属性 3 面板 


图 8-10 ”添加 形状 提示 
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65 综合 应 用 


8.5.1 按钮 的 制作 


制作 按钮 ,灰色 边框 白色 的 字 , 在 指针 经 过 帧 变 为 绿色 边框 .红色 的 字 , 在 按 下 帧 为 蓝 
色 边 框 ` 黑 色 的 字 ,操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 ] 代 新 建 ] 命 令 , 创 建文 件 , 设 置 200 像素 X200 像素 大 小 ,其 
余 参 数 默 认 , 如 图 8-11 所 示 。 


图 8-11 新 建文 件 


(2) 选择 菜单 栏 中 的 【插入 了 区 新 建 元 件 了 命令 ,在 【新 建 元 件 ] 对 话 框 中 选择 类 型 为 “图 
形 元 件 ”\ 设 置 元 件 名 为 “元 件 1”, 如 图 8-12 所 示 。 


图 8-12 新 建 图 形 元 件 


(3) 选择 椭圆 工具 , 单 击 工 具 箱 下 方 的 [对 象 绘制 按钮 ,在 元 件 编辑 窗口 中 当 光 标 呈 
“十 ” 字 时 从 中 心 点 按 住 Shift 十 Alt 键 绘制 正 圆 ,然后 选择 【颜色 3 面板 中 的 线性 渐变 ,由 灰 到 
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白色 对 正 圆 进行 填充 。 选 择 渐变 编辑 工具 ,将 光标 放 在 右上 角 点 上 旋转 ,调整 渐变 为 从 上 到 
下 ,如 图 8-13 所 示 。 
(4) 重复 步骤 3 的 操作 ,绘制 一 个 比 灰 圆 小 一 点 的 圆 ,由浅 绿 到 深 绿 填充 ,如 图 8-14 所 示 。 


图 8-13 灰色 圆 的 绘制 和 填充 图 8-14 绿色 圆 的 绘制 和 填充 


(5) 再 次 选择 椭圆 工具 , 单 击 工具 箱 下 方 的 [对 象 绘制 ] 按 钮 ,绘制 一 个 小 椭圆 ,然后 选 
择 [ 颜 色 】 面 板 中 的 线性 渐变 ,由 灰 到 白 对 椭圆 进行 填充 ,将 一 侧 的 白色 的 透明 度 设 为 0, 并 
用 渐变 编辑 工具 调整 渐变 为 从 上 到 下 ,如 图 8-15 所 示 。 


图 8-15 椭圆 的 绘制 和 填充 


(6) 复制 两 次 元 件 1, 得 到 “元 件 1 副本 ”“ 元 件 1 副本 2”, 将 其 中 的 颜色 进行 修改 ,将 
灰色 的 大 椭圆 分 别 改 为 浅 蓝 色 和 黄色 ,如 图 8-16 所 示 。 

(7) 选择 菜单 栏 中 的 【插入 了 民 新 建 元 件 ] 命 令 , 在 【创建 新 元 件 ] 对 话 框 中 选择 类 型 为 
“按钮 ”设置 元 件 名称 为 “元 件 2”, 如 图 8-17 所 示 。 


8-16 复制 元 件 1 并 修改 图 8-17 新 建 按钮 元 件 
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(8) 在 按钮 元 件 的 [时 间 轴 】 面 板 中 对 弹 起 、 指 针 经 过 、 按 下 3 个 帧 插入 关键 帧 ,并 将 “元 
件 1”“ 元 件 1 副本 ”“ 元 件 1 副本 2” 分 别 拖 到 这 3 帧 ,然后 插入 新 图 层 , 在 新 图 层 中 分 别 为 
3 个 帧 输入 文字 “ 弹 起 ”“ 滑 过 ”“ 按 下 ”, 并 改变 文字 颜色 为 白色 、 红 色 、 黑 色 ,【 时 间 轴 】 面 板 


如 图 8-18 所 示 。 


图 8-18 关键 帧 的 [时 间 轴 面板 


(9) 将 按钮 拖 入 舞台 ,预览 ,效果 如 图 8-19 所 示 。 


图 8-19 按钮 实例 效果 图 


8.5.2 运动 小 球 的 制作 


制作 一 个 运动 的 小 球 , 让 小 球 在 天 与 地 之 间 弹 起 、 落 下 , 磁 到 接触 物 时 会 变形 为 扁 加 ,其 


操作 步骤 如 下 : 
(1) 选择 菜单 栏 中 的 【文件 ] 代 新 建 ] 命 令 ,建立 一 个 200 像素 X600 像素 大 小 的 Flash 


文档 ,如 图 8-20 所 示 。 


图 8-20 新建 文件 


Web 前 端 开发 及 应 用 教程 


(2) 选择 菜单 栏 中 的 [文件 〗IK 导 入 】I【 导 入 到 舞台 J 命令 ,将 素材 导入 到 文档 中 ,移动 到 
合适 的 位 置 ,并 按 Ctrl 十 B 键 将 图 片 打 散 。 然 后 使 用 选择 工具 在 素材 中 部 拖 动 鼠 标 绘制 矩 
形 , 并 按 Delete 键 将 多 余部 分 删除 ,如 图 8-21 所 示 。 

(3) 单 击 【图 层面 板 下方 的 【新 建 图 层 ] 按 钮 创建 “图 层 2”, 然 后 选择 椭圆 工具 , 按 住 
Shift 键 绘制 一 个 正 圆 ; 选择 线条 工具 ,将 笔触 调 为 2 绘制 一 段 线段 ,用 移动 工具 将 其 向 下 
弯曲 ; 复制 线段 ,移动 位 置 ,形成 图 8-22 所 示 的 笑脸 形状 的 小 球 。 

(4) 按 F8 键 , 在 【转换 为 元 件 ] 对 话 框 中 将 小 球 转换 成 图 形 元 件 , 将 其 移动 到 天 空 的 底 
部 ,然后 在 第 15 帧 中 插入 关键 帧 ,将 小 球 移 到 绿地 的 位 置 ,在 第 16 帧 中 插入 关键 帧 ,选择 任 
意 变 形 工具 ,将 小 球 压 扁 一 点 ,在 第 17、18 帧 同 理 将 小 球 压 的 更 扁 一 些 , 在 第 19、20 帧 中 插 
入 关键 帧 ,将 小 球 调整 回 原始 大 小 ,如 图 8-23 所 示 。 


—— = 
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AS 
图 8-21 导入 素材 并 处 理 8-22 绘制 笑脸 小 球 图 8-23 压 扁 小 球 


(5) 在 第 36 帧 中 插入 关键 帧 ,将 小 球 拖 回 天 空位 置 ,如 图 8-24 所 示 ; 重复 第 4、5 步 ,将 
小 球 压 扁 并 再 次 恢复 。 将 光标 放 在 1 一 15 帧 之 间 的 任意 帧 ,然后 右 击 ,在 快捷 菜单 中 选择 
【创建 传统 补 间 了 命令 ,时 间 轴 上 出 现 淡 紫色 底 纹 ; 同 理 , 在 20 一 36 帧 之 间 也 创建 传统 
补 间 。 

(6) 保存 ,预览 ,小 球 在 天 空 与 地 面 之 间 跳 动 ,如 图 8-25 所 示 。 
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图 8-24 天 空位 置 的 小 球 图 8-25 ”跳动 的 小 球 


8.5.3 欢迎 光临 Banner 的 制作 


制作 一 个 欢迎 光临 的 Banner, 星 星 逐 个 进入 舞台 ,变形 为 文字 ,其 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 [文件 ] 代 新 建 ] 命 令 ,建立 一 个 480 像素 X80 像素 大 小 的 Flash 文档 。 

(2) 选择 菜单 栏 中 的 【文件 了 民 导 入 了 民 导 入 到 舞台 命令, 将 * 花 图片 素材 导入 到 舞台 ， 
并 调整 大 小 和 位 置 ,然后 第 90 帧 中 插入 帧 ,如 图 8-26 所 示 。 


a ~ 
Sg 


图 8-26 导入 图 片花 ” 


(3) 选择 菜单 栏 中 的 【文件 ] 民 导入 ] 民 导入 到 舞台 命令 ,将 “星星 ”图片 素材 导入 到 舞 
台 ,并 按 Ctrl 十 B 键 打 散 。 然 后 按 F8 键 ,将 其 转换 为 图 形 “ 元 件 1”, 如 图 8-27 所 示 。 


食 未 
一 
要 se Ss SS 

图 8-27 导入 图 片 “ 星 星 ” 并 转换 为 图 形 元 件 


(4) 单 击 【 图 层面 板 下 方 的 [新 建 图 层 ] 按 钮 ,新 建 “ 图 层 2”, 然 后 单 击 第 1 帧 ,将 “元 件 
1” 拖 到 舞台 外 ; 在 第 10 帧 插入 关键 帧 ,将 “元 件 1" 拖 到 舞台 内 的 适当 位 置 ; 在 1 一 10 帧 之 
间 的 任意 位 置 右 击 ,在 弹出 的 快捷 菜单 中 选择 【创建 传统 补 间 ] 命 令 ; 在 第 43 帧 插入 关键 
帧 , 按 Ctrl 十 B 键 将 “元 件 1” 打 散 ; 在 第 53 帧 插入 关键 帧 ,将 元件 1” 删 除 。 选 择 工具 箱 中 
的 文本 工具 ,输入 文字 “ 欢 ”, 在 [属性 面板 中 设置 大 小 为 60 点 、 颜 色 为 红色 、 华 文 隶 书 , 移 到 


154。 Web 前 端 开发 及 应 用 教程 


和 星星 位 置 重 合 , 并 按 Ctrl 十 B 键 将 文字 打 散 ,同样 ,创建 补 间 形 状 动画 ,如 图 8-28 所 示 。 


图 8-28 图 层 2 的 编辑 


(5) 新 建 图 层 3.4.5, 在 不 同 的 帧 位 置 重 复 第 4 步 的 操作 ,建立 第 2.3、4 个 星星 的 动画 ， 
【时 间 轴 】 面 板 如 图 8-29 所 示 。 


图 8-29 各 图 层 的 [时 间 轴 面板 


(6) 保存 ,预览 ,最 终 效果 如 图 8-30 所 示 。 


欢 沈 光 疙 :es 


图 8-30 案例 的 最 终 效果 


8.5.4 动画 标识 的 制作 


制作 一 个 动画 标识 ,3 个 环 一 点 一 点 地 删除 ,箭头 3D 旋转 。 其 操作 步骤 如 下 ， 
(1) 选择 菜单 栏 中 的 【文件 ] 民 新 建 ] 命 令 ,建立 一 个 550 像素 X400 像素 大 小 的 Flash 
文档 ,如 图 8-31 所 示 。 


图 8-31 新 建文 件 
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(2) 选择 工具 箱 中 的 矩形 工具 ,在 舞台 上 拖 动 绘 制 一 个 550 像素 X400 像素 的 矩形 , 填 
充 颜 色 为 #89E0D2, 如 图 8-32 所 示 。 

(3) 新 建 “ 图 层 2”, 选 择 工具 箱 中 的 椭圆 工具 , 按 住 Shift 键 在 舞台 上 绘制 一 个 正 圆 ,并 
设置 笔触 大 小 为 15、 颜 色 为 蓝 色 , 如 图 8-33 所 示 。 


图 8-32 绘制 矩形 图 8-33 绘制 正 圆 


(4) 新 建 “图 层 3”, 按 Ctrl 十 C 键 复制 蓝 色 的 圆 ,然后 选择 菜单 栏 中 的 [编辑 【粘贴 到 
当前 位 置 ] 命 令 ,将 圆 复制 到 “图 层 3” 上 与 “图 层 2” 相 同 的 位 置 ; 选择 工具 箱 中 的 任意 变形 
工具 , 按 住 Shift 十 Alt 键 ,在 右上 角 控 制 点 处 拖 动 , 成 比例 从 中 心 点 放大 ,并 将 笔触 颜色 改 为 
红色 ,如 图 8-34 所 示 。 

(5) 新 建 “ 图 层 4”, 按 Ctrl 十 C 键 复制 蓝 色 的 圆 ,然后 选择 菜单 栏 中 的 [编辑 J 粘贴 到 
当前 位 置 ] 命 令 ,将 圆 复制 到 “图 层 4” 上 与 原来 相同 的 位 置 ; 选择 工具 箱 中 的 任意 变形 工具 ， 
按 住 Shift 十 Alt 键 ,在 右上 角 控 制 点 处 拖 动 , 成 比例 从 中 心 点 放大 ,并 将 笔触 颜色 改 为 绿色 ， 
如 图 8-35 所 示 。 


图 8-34 复制 正 圆 并 修改 为 红色 图 8-35 复制 正 圆 并 修改 为 绿色 


(6) 选中 “图 层 2” 中 的 蓝 环 , 在 第 2 帧 插入 关键 
帧 ,并 用 橡皮 擦 工 具 将 蓝 环 的 某 一 位 置 擦 掉 一 块 ; 在 
第 3 帧 插入 关键 帧 ,并 用 橡皮 擦 工具 接着 上 一 次 擦 
除 的 位 置 继续 擦 除 ; 在 第 4 帧 插入 关键 帧 ,重复 擦 除 
操作 ,如 图 8-36 所 示 , 直 到 将 蓝 环 全 部 擦 除 。 按 住 
Shift 键 将 “图 层 2” 中 的 所 有 帧 选中 ,然后 右 击 , 在 快 
捷 菜 单 中 选择 【翻转 帧 】 命 令 。 8-36 修改 关键 
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(7) 选中 “图 层 3” 中 的 红 环 , 按 第 6 步 的 操作 将 红 环 全 部 擦 除 。 
(8) 选中 “图 层 4” 中 的 绿 环 . 按 第 6 步 的 操作 将 绿 环 全 部 擦 除 . 【时间 轴 面板 如 图 8-37 
所 示 。 


图 8-37 【时 间 轴 面板 


(9) 新 建 “ 图 层 5”, 选 择 菜 单 栏 中 的 【文件 ] 民 导入 了 民 导 入 到 舞台 命令 ,选择 “箭头 ”图 
片 素材 将 其 导入 到 舞台 ; 选中 箭头 , 按 F8 键 在 [转换 元 件 ] 对 话 框 中 将 其 转换 为 影片 剪辑 元 
件 , 如 图 8-38 所 示 。 

(10) 右 击 “图 层 5”, 在 1 一 18 帧 中 右 击 任意 一 帧 ,在 弹出 的 快捷 菜单 中 选择 【创建 补 间 
动画 命令, 在 “图 层 5” 的 帧 中 间 将 出 现 蓝 色 底 纹 ; 在 动画 的 最 后 一 帧 插入 关键 帧 ,再 次 右 击 
最 后 一 个 关键 帧 ,在 快捷 菜单 中 选择 【插入 关键 帧 3 旋转 3 命令 ,并 使 用 3D 旋转 工具 拖 动 
鼠标 设置 旋转 效果 ,如 图 8-39 所 示 。 


图 8-38 导入 图 片 “箭头 "并 转换 图 8-39 旋转 “箭头 "图片 


(11) 保存 ,预览 ,最 终 时 间 轴 效果 如 图 8-40 所 示 。 


8-40 最终 时 间 轴 效果 


本 章 学 习 目 标 : 

忆 了 解 引 导 层 . 遮 单 层 的 概念 。 

名 了 和 解 ActionScript 3.0 的 基础 知识 。 
局 掌握 引导 层 、 遮 唱 层 动画 的 制作 。 
名 掌握 交互 动画 的 制作 。 


6.i 引导 层 动画 


基本 的 动画 补 间 动 画 只 能 使 对 象 做 直线 方向 的 运动 ,如 果 要 设计 曲线 运动 的 动画 ,就 必 
须 不 断 地 设置 关键 帧 ,指定 运动 的 路 线 ,因此 为 了 简化 操作 ,Flash 中 提供 了 引导 层 ,让 一 个 
对 象 可 以 沿 着 固定 的 运动 路 径 运动 。 


9.1.1 引导 层 动画 的 概念 


引导 层 是 Flash 中 的 一 个 比较 特殊 的 图 层 , 用 户 可 以 在 运动 引导 层 中 绘制 对 象 的 运动 
路 径 , 然 后 将 一 个 或 多 个 图 层 链接 到 该 图 层 中 ,让 一 个 或 多 个 对 象 沿 同一 条 路 径 运动 。 在 引 
导 层 中 的 所 有 内 容 都 只 能 作为 运动 的 参考 ,在 播放 时 不 会 出 现 。 


9.1.2 创建 引导 层 动画 


一 个 引导 层 动画 由 “引导 层 " 和 ”被 引导 层 ? 组 成 ,其 "引导 层 ” 只 能 有 一 个 ,而 “被 引导 层 ” 
可 以 有 多 个 。 在 制作 引导 层 动画 时 需要 创建 一 个 “引导 层 ”, 在 “引导 层 ” 上 绘制 对 象 运动 的 
线条 ,然后 将 “被 引导 层 ” 上 的 对 象 吸附 到 线条 上 ,从 而 创建 引导 层 动画 。 其 方法 如 下 ，; 

在 [时 间 轴 面板 中 选择 要 添加 “引导 层 ” 的 图 层 , 然 后 右 击 , 在 弹出 的 快捷 菜单 中 选择 
【添加 传统 运动 引导 层 ] 命 令 ,就 可 以 添加 运动 引导 层 了 ,引导 层 动画 的 时 间 轴 如 图 9-1 所 示 。 


图 9-1 引导 层 动画 的 时 间 轴 
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9.1.3 引导 层 动画 的 参数 设置 


在 默认 情况 下 ,对 象 在 沿路 径 运动 的 过 程 中 ,不 管 曲线 的 轨迹 往 哪 个 方向 ,对 象 本 身 的 
角度 是 不 变 的 ,如 果 需 要 让 对 象 按照 曲线 的 方向 来 调整 运动 的 角度 ,可 以 设置 引导 动画 的 参 
数 。 在 创建 引导 层 动画 后 , 单 击 被 引导 图 层 的 第 1 帧 ,打开 【属性 了 面板 (动画 过 渡 【 属 性 】 面 
板 ) ,其 中 , 勾 选 【 贴 紧 ] 复 选 框 ,可 以 使 被 引导 层 上 对 象 的 中 心 点 自动 吸附 到 路 径 上 : 勾 选 
【调整 到 路 径 ] 复 选 框 ,可 以 使 被 引导 层 上 的 对 象 按照 引导 线 的 方向 改变 自己 的 角度 ,如 
图 9-2 所 示 。 


图 9-2 动画 过 渡 【 属 性 了 面板 


9.1.4 取消 引导 层 动画 

在 [时间 轴 ] 面 板 上 选择 要 解除 引导 的 “引导 层 ”, 然 后 右 击 , 在 弹出 的 快捷 菜单 中 选择 
【引导 层 ] 命 令 ,此 时 “引导 层 "的 图 标 变 为 普通 图 层 图 标 。 
(9.2 遮 罩 层 动画 


遗 单 动画 是 通过 咕 置 层 来 实现 的 ,通过 遮 单 层 动画 可 以 很 容易 地 实现 水 波 、 百 叶 窗 等 
特效 。 


9.2.1 遮 罩 层 的 概念 


在 现实 生活 中 可 以 看 到 很 多 类 似 遮 日 的 情况 ,例如 通过 望远镜 只 能 看 到 一 部 分 景物 ,在 
Flash 中 可 以 通过 遮 沁 层 来 定义 其 下 面 图 层 中 对 象 的 可 见 区 域 。 遮 畦 层 是 一 种 很 特殊 的 
图 层 ,可 以 将 下 面 的 图 层 屏蔽 ,而 下 方 的 被 速 团 层 只 能 显示 上 方 遮 单 层 图 形 区 域 大 小 的 
内 容 。 
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9.2.2 创建 庶 罩 层 动画 


一 个 遮 单 层 动画 由 最 上 层 的 * 遮 置 层 " 和 紧邻 下 方 的 “被 遗 单 层 ?组 成 ,其 中 * 遗 音 层 ?只 
能 有 一 个 ,而 “被 遗 单 层 " 可 以 有 多 个 。 需 要 注意 的 是 ， 遮 单 层 " 只 是 用 来 限定 一 个 范围 , 除 
了 线条 外 ,可 以 使 用 任何 类 型 的 对 象 。 

在 [时 间 轴 面板 中 选择 要 设置 为 * 遮 日 层 ”的 图 层 , 然 后 右 击 , 在 弹出 的 快捷 菜单 中 选择 
【 迹 电 层 命令 ,就 可 以 添加 遮 日 了 。 应 用 了 遮 日 层 动画 的 时 间 轴 如 图 9-3 所 示 。 


Tl dp lp Pi eo Homi 


图 9-3 应 用 了 遮 单 层 动画 的 时 间 轴 


9.2.3 取消 遮 罩 层 


在 【时 间 轴 ] 面 板 上 选择 * 遮 单 层 ”, 然 后 右 击 , 在 弹出 的 快捷 菜单 中 选择 【 遗 单 层 ] 命 令 ， 
此 时 "* 遮 罩 层 " 和 ”被 遗 罩 层 "的 图 标 都 变 为 普通 层 。 


6.3 交互 式 动画 


9.3.1 ActionScript 3.0 简介 


ActionScript 是 由 Flash Player 中 的 ActionScript 虚拟 机 (AVM) 来 执行 的 。 
ActionScript 代码 通常 被 编译 器 编译 成 “ 字 节 码 格 式 ”( 一 种 由 计算 机 编写 且 能 够 为 计算 机 
所 理解 的 编程 语言 ) ,如 Adobe Flash CS6 Professional 或 Adobe Flex Builder 的 内 置 编译 
器 ,或 Adobe Flex SDK 和 Flex Data Services 中 提供 的 编译 器 。 将 字 节 码 央 入 SWF 文件 
中 ,SWF 文件 由 运行 时 环境 Flash Player 执行 。 

AS3.0 的 脚本 编写 功能 超越 了 AS 的 早期 版 本 , 它 旨 在 方便 创建 拥有 大 型 数据 集 和 面 
向 对 象 的 可 重用 代码 库 的 高 度 复杂 的 应 用 程序 .虽然 AS 3. 0 对 于 在 Adobe Flash Player 9 
中 运行 的 内 容 并 不 是 必需 的 ,但 它 使 用 新 型 的 虚拟 机 AVM2 实现 了 性 能 的 改善 。AS3. 0 代 
码 的 执行 速度 比 旧式 的 AS 代码 快 了 10 售 。 

AS3. 0 提供 了 可 靠 的 编程 模型 ,具备 面向 对 象 编程 基本 知识 的 开发 人 员 对 此 模型 会 感 
受到 似曾相识 , 它 的 一 些 主要 功能 如 下 : 

。 一 个 新 增 的 ActionScript 虚拟 机 , 称 为 AVM2, 它 使 用 全 新 的 字 节 码 指令 集 , 可 以 使 

性 能 显著 提高 。 
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一 个 更 为 先进 的 编译 器 代码 库 , 它 更 为 严格 地 遵循 ECMAScript(ECMA262) 标 准 ， 
并 且 相 对 于 早期 的 编译 器 版 本 可 执行 更 深入 的 优化 。 

一 个 扩展 并 改进 的 应 用 程序 编程 接口 (API) ,拥有 对 对 象 的 低级 控制 和 真正 意义 上 
的 面向 对 象 模型 。 

。 一 种 基于 即将 发 布 的 ECMAScript(ECMA-262) 第 4 版 草案 语言 规范 的 核心 语言 。 
。 一 个 基于 文档 对 象 模 型 (DOMD) 第 3 级 事件 规范 的 事件 模型 。 


9.3.2 常用 的 数据 类 型 


在 ActionScript 3. 0 中 经 常 要 用 到 的 数据 类 型 为 所 有 的 基 元 数据 类 型 (Boolean ,int、 
uint ,Number、String) 和 两 种 复杂 的 数据 类 型 (Array、Object)。 


1. 字符 串 (String) 

字符 串 是 一 对 用 双 引 号 括 起 来 的 字母 数字 、 特 殊 字符 的 组 合 ,如 “Hello World!”。 引 
号 内 的 字符 是 区 分 大 小 写 的 ,字符 串 型 数据 能 进行 字符 串 连 接 运 算 。 

2. 布尔 值 (Boolean) 

布尔 值 是 用 来 表示 真 假 的 数据 类 型 , 它 只 有 true( 真 ) 和 false( 假 ) 两 个 值 。 如 果 只 声明 
一 个 布尔 类 型 的 变量 ,没有 给 它 赋 值 ,默认 值 是 false。 

3. 数字 (int、uint、Number) 

在 ActionScript 3. 0 中 表示 数字 值 的 数据 类 型 很 少 ,只 有 3 种 , 即 int、uint、Number。 
其 中 ,int 和 uint 是 整 型 数值 ,专门 用 来 处 理 整 数 ,而 Number 是 用 来 处 理 浮 点 数 的 。 

4. 数组 (Array) 

数组 是 可 以 作为 数据 的 容器 , 它 能 包含 更 多 的 数据 ,每 一 个 元 素 ( 数 据 中 的 一 部 分 ) 都 被 


依附 于 一 个 索引 。 
数组 的 声明 方式 有 几 种 ,如 表 9-1 所 示 。 


表 9-1 数组 的 声明 方式 


数 组 声 明 
var a :Array 声明 一 个 数组 变量 a, 但 还 没有 告诉 a 的 引用 指向 谁 ,trace 得 到 null 
var b: Array=[ ] 直接 声明 一 个 空 数组 变量 b,trace 得 到 空白 的 显示 ,但 不 再 是 null 了 
var c: Array 一 new Array( ); 效果 同 4 的 方法 
var d: Array 一 [1,2,3,4]; 直接 使 用 [] 操 作 符 ,建立 一 个 含有 整数 1.2.3、4 的 数组 
var e: Array 一 new Array(1,2,3,4); | 使 用 Array 类 进行 和 d 同样 的 操作 
var f: Array 一 new Array(5); 声明 一 个 长 度 为 5 的 空 数组 ,此 时 每 个 数组 元 素 都 为 空 


访问 数组 中 的 元 素 只 需要 知道 元 素 的 位 置 ,就 可 以 使 用 数组 运算 符 “[]” 来 访问 它 。 例 
如 dL[0]、d[1], 索 引 0 代表 第 一 个 元 素 , 第 二 个 元 素 的 索引 值 为 1 ,其余 依 此 类 推 。 
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5. 对 象 (Object) 


对 象 数据 类 型 包含 大 量 复 杂 的 信息 ,是 ActionScript 所 有 数据 结构 的 基石 ,是 面向 对 象 
编程 思想 的 载体 。 对 象 是 属性 的 集合 ,每 个 属性 都 有 名 字 和 值 ; 属性 值 可 以 是 任何 一 种 
Flash 支持 的 数据 类 型 ,甚至 是 对 象 类 型 ; 对 象 及 其 属性 的 设 定 需 要 使 用 “. ”操作 符 。 

点 语法 “. ”用 于 设置 对 象 或 影片 剪辑 的 属性 和 方法 , 它 也 用 于 标识 指向 影片 剪辑 或 变量 
的 目标 路 径 。 一 个 点 语法 表达 式 以 对 象 或 影片 剪辑 的 名 字 开 始 , 后 面 跟着 一 个 点 ,以 属性 、 
方法 或 者 变量 结束 ,在 这 两 组 之 间 可 以 插入 路 径 。 

例如 ,_x 表示 一 个 影片 剪辑 实例 在 X 轴 的 位 置 ,而 newMC._x 用 来 指出 影片 剪辑 实例 
newMC 的 X 轴 的 位 置 。 


9.3.3 语法 规则 

动作 脚本 拥有 自己 的 一 套 语法 规则 和 标点 符号 。 

1. 运算 符 

在 动作 脚本 中 ,点 ". ”用 于 表示 与 对 象 或 影片 剪辑 相关 联 的 属性 或 方法 ,也 可 用 于 标识 
影片 剪辑 或 变量 的 目标 路 径 。 点 运算 符 表达 式 以 影片 或 对 象 的 名 称 开始 ,中 间 为 点 运算 符 ， 
最 后 是 要 指定 的 元 素 。 

例如 ,_x 影片 剪辑 属性 指示 影片 剪辑 在 舞台 上 的 X 轴 的 位 置 ,表达 式 aaMC_x 引用 影 
片 剪辑 实例 aaMC 的 _x 属性 。 

无 论 是 表达 对 象 的 方法 还 是 影片 剪辑 的 方法 , 均 遵 循 同 样 的 模式 。 例 如 ,aa_MC 影片 
剪辑 实例 的 play() 方 法 在 aa_MC 的 时 间 轴 中 移动 播放 头 , 如 下 面 的 语句 所 示 : 

aa MC. play( ); 


点 语法 还 使 用 两 个 特殊 别名 _root 和 _parent, 别 名 _root 指 主 时间 轴 ,可 以 使 用 _root 别 
名 创建 一 个 绝对 目标 路 径 。 例 如 ,下 面 的 语句 调用 主 时 间 轴 上 的 影片 剪辑 function 中 的 
buildGrameBoard(): 


_root. function. buildGrameBoard( ) ; 


可 以 使 用 别名 _parent 引用 当前 对 象 谍 入 到 的 影片 剪辑 ,也 可 以 对 使 用 _parent 创建 相 
对 目标 路 径 。 例 如 ,如果 影 片 剪辑 aa_MC 嵌入 影片 剪辑 bb_MC 的 内 部 , 则 实例 aa_MC 的 
如 下 语句 会 指示 bb_MC 停止 : 


parent. bb_mc. stop( ); 
2. 界定 符 


(1) 大 括号 : 动作 脚本 中 的 语句 可 被 大 括号 包括 起 来 组 成 语句 块 。 
例如 : 


// 事 件 处 理 函 数 
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public Function myDate( ){ 

Var myData:Date = new Date( ); 
currentMonth = myDate. getMonth( ); 
} 


(2) 分 号 : 动作 脚本 中 的 语句 可 以 由 一 个 分 号 结尾 。 如 果 在 结尾 处 省 略 分 号 ,Flash 仍 
然 可 以 成 功 编译 脚本 。 

例如 : 

var colum = passedDate. getDay( ); 

var row= 0; 

(3) 圆 括号 : 在 定义 函数 时 ,任何 参数 定义 都 必须 放 在 一 对 圆 括号 内 。 

例如 : 


function myFunction(name, age reader){ 


} 

在 调用 函数 时 ,需要 被 传递 的 参数 也 必须 放 在 一 对 圆 括号 内 ,例如 : 
myFunction( "Steve", 10, true); 

可 以 使 用 圆 括号 改变 动作 脚本 的 优先 顺序 或 增强 程序 的 易 读 性 。 
3. 区 分 大 小 写 


在 区 分 大 小 写 的 编程 语言 中 , 仅 大 小 写 不 同 的 变量 名 (book 和 Book) 被 视 为 互 不 相同 ， 
ActionScript 3.0 中 的 标识 符 区 分 大 小 写 ,例如 下 面 两 条 动作 语句 是 不 同 的 : 


cat. hilite= true; 
CAT. hilite = true; 


对 于 关键 字 、 类 名 、 变 量 、 方 法 名 等 ,要 严格 区 分 大 小 写 。 如 果 关 键 字 大 小 写 出 现 错误 ， 
在 编写 程序 时 会 有 错误 信息 提示 ; 如 果 采 用 了 彩色 语法 模式 ,那么 正确 的 关键 字 将 以 深蓝 
色 显 示 。 


4. 注释 


在 【动作 了 面板 中 ,使 用 注释 语句 可 以 在 一 个 帧 或 者 按钮 的 脚本 中 添加 说 明 , 有 利于 增加 
程序 的 易 读 性 。 注 释 语句 以 双 斜 线 *“// 开 始 , 斜 线 显示 为 灰色 ; 注释 内 容 可 以 不 考虑 长 度 
和 语法 ,注释 语句 不 会 影响 Flash 动画 输出 时 的 文件 量 。 例 如 : 


public Function myDate( ){ 

// 创 建新 的 Date 对 象 

var my Date; 

Date = new Date( ); 

currentMonth = myDate. getMonth( ); 

// 将 月 份 数 转换 为 月 份 名 称 
monthName = calcMonth( currentMonth); 
Year = myDate. getFullYear( ); 
currentDate = myDate. getDate( ); 

} 
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5. 关键 字 

动作 脚本 保留 了 一 些 单词 用 于 该 语言 中 的 特定 用 途 , 因 此 不 能 将 它们 用 作 变 量 、 函 数 或 
标签 的 名 称 ; 如 果 在 编写 程序 的 过 程 中 使 用 了 关键 字 , 动 作 编辑 框 中 的 关键 字 会 以 蓝 色 显 
示 。 为 了 避免 冲突 ,在 命名 时 可 以 展开 动作 工具 箱 中 的 Index 域 ,检查 是 否 使 用 了 已 定义 的 
名 学 。 

6. 常量 

常量 中 的 值 永远 不 会 改变 ,所 有 的 常量 都 可 以 在 【动作 了 面板 的 工具 箱 和 动作 脚本 字典 
中 找到 。 


9.3.4 变量 及 运算 符 、 表 达 式 
1. 变量 的 声明 
在 ActionScript 3. 0 中 声明 变量 的 格式 如 下 : 


var 变量 名 :数据 类 型 ; 

var 变量 名 :数据 类 型 = 值 ; 

var 是 一 个 关键 字 , 用 来 声明 变量 。 变 量 的 数据 类 型 写 在 冒号 后 ; 其 次 ,如 果 要 赋值 , 值 
的 数据 类 型 必须 和 变量 的 数据 类 型 一 致 。 

ActionScript 3. 0 代码 每 行 的 结尾 若 不 加 上 分 号 不 会 导致 报错 ,但 是 为 了 使 代码 标准 
化 ,应 当 加 上 。 另 外 , 某 些 ActionScript IDE( 开 发 环境 ) 会 对 句 尾 不 加 分 号 的 情况 报错 。 


// 错 误 的 例子 
i; // 没 有 加 var 关键 字 , 即 没有 声明 变量 , 出 错 
i=3; // 没 有 加 var 关键 字 , 出 错 


var j:int = "String Value"; 


// 声 明 变量 的 数据 类 型 为 int, 却 赋予 了 一 个 字符 串 的 值 , 出 错 


// 正 确 的 例子 

var i : int; // 声 明了 一 个 int 型 变量 ,但 没有 赋值 ,只 好 使 用 默认 值 
var k : int = 100; // 声 明了 一 个 int 型 变量 ,并 赋值 100 

var h; // 声 明 变量 h, 但 未 指定 类 型 ,默认 值 为 untyped 

Var g : #; // 声 明 变量 g, 效 果 同 上 行 


2. 变量 的 命名 


命名 规则 不 仅仅 是 为 了 让 编写 的 代码 符合 语法 ,更 重要 的 是 增强 自己 代码 的 可 读 性 ,要 
做 到 让 自己 能 看 清楚 ,让 别人 能 看 明白 。 

(1) 尽量 使 用 有 含义 的 英文 单词 作为 变量 名 (例如 ,一 个 变量 名 为 address, 这 个 变量 存 
储 的 应 该 是 地 址 ) 。 

(2) 变量 名 采用 骆驼 式 命名 法 (骆驼 式 命名 法 是 指 混合 使 用 大 小 写字 母 来 构成 变量 的 
名 字 。 若 首 字 母 小 写 , 第 二 个 词 的 首 字 母 大 写 ) 。 

(3) 变量 名 不 能 是 ActionScript 3. 0 内 部 定义 的 保留 字 和 关键 字 ,ActionScript 3. 0 保 
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留 了 一 些 专门 用 于 本 语言 中 不 能 用 于 变量 、 函 数 名 等 的 定义 ,常用 的 关键 字 有 break、 for、 
new、var、,continue, function, return、 void delete if this、 while、 typeof、 with, set, get,try、 


true,false\class,else、each,include .null\is\in\const。 

3. 运算 符 、 表 达 式 

编程 语言 必须 要 清楚 地 描述 如 何 进 行 数据 运算 ,因此 必须 通过 某 种 表达 方式 告诉 计算 
机 进行 什么 样 的 数据 运算 。 

(1) 赋值 运算 符 : 二。 

(2) 算术 运算 : 十 .一 、* 、/、%%( 模 )。 

(3) 算术 赋值 运算 符 : 十 一 、 一 一 “一 /一 、% 一 ,等 价 关 系 见 表 9-2。 

表 9-2 算术 赋值 运算 符 的 等 价 表达 式 


运算 符 运算 符 举例 等 价 表达 式 
十 一 a+=6 a=atb 
es = wu 
和 六 和 a=a*b 
a a/=b a=a/b 
%= a%=b a=a%b 
(4) 关系 运算 符 : 二 一 、! =、=、<=,>,<。 


这 些 操 作 比 较 简 单 ,这 里 不 再 多 讲 ,注意 其 返回 值 为 布尔 值 。 

(5) 逻辑 运算 符 : &.&、||、!。 

迪 辑 运算 符 比较 好 理解 ,只 包括 3 个 运算 符 。 

。 侵 辑 与 (&&); 当 两 边 表达 式 都 为 true 时 ,返回 值 为 true。 

。 逮 辑 或 (||): 当 两 边 表达 式 有 一 个 值 为 true 时 ,返回 值 为 true。 
。 逻辑 非 (!1); 只 有 一 个 运算 对 象 ,在 右边 ,其 布尔 值 取 反 。 


9.3.5 流程 控制 语句 


程序 流程 是 程序 执行 的 方向 ,是 语句 执行 的 先后 顺序 。 在 ActionScript 3.0 中 有 3 种 
结构 的 控制 流程 , 即 顺序 .分 支 和 循环 。 任 何 复杂 的 程序 都 可 以 由 这 3 种 结构 组 成 ,这 3 种 
结构 相互 包含 , 嵌 套 使 用 。 


1. 顺序 结构 


顺序 结构 是 程序 最 基本 、 最 简单 的 结构 ,在 分 支 结构 和 循环 结构 中 也 包含 顺序 结构 。 在 
顺序 结构 中 ,程序 按照 语句 出 现 的 先后 顺序 依次 执行 ,直到 到 达 最 后 的 语句 。 顺 序 结构 的 示 
意图 如 图 9-4 所 示 。 


2. 分 支 结 构 


分 支 结构 是 程序 依据 预先 设 定 的 条 件 成 立 与 否决 定 执行 哪个 分 支 ,分 支 结 构 由 if 条 件 
语句 实现 ,分 支 结构 也 称 为 条 件 结构 。 分 支 结构 的 示意 图 如 图 9-5 所 示 。 


| 程序 入 口 <er> 
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语句 序列 1 1 ! 
T 语句 序列 1 语句 序列 2 
语句 序列 2 
语句 序列 n 程序 出 口 
二 程序 出 口 
图 9-4 ”顺序 结构 的 示意 图 图 9-5 分 支 结构 的 示意 图 


整个 {条件 语句 的 语法 格式 如 下 : 


if( 条 件 1) 
{ 
代码 段 1 
}else if( 条 件 2) 
{ 
代码 段 2 
} 
else 
‘ 
代码 段 n 
} 


在 计 条 件 结构 中 ,else 选项 可 要 可 不 要 。 当 程序 执行 到 计 语 句 时 ,首先 判断 条 件 1 是 否 
成 立 ,如果 成 立 , 则 执行 代码 段 1, 然 后 退出 条 件 结构 ,执行 条 件 结构 后 面 的 语句 ; 如 果 条 件 
1 不 成 立 , 则 依次 判断 条 件 2 是 否 成 立 , 如 果 成 立 , 执 行 代码 段 2, 退 出 条 件 结构 ; 如 果 不 成 
立 ,继续 判断 设 定 的 其 他 条 件 ; 当 设 定 的 所 有 条 件 都 不 成 立时 ,执行 else 后 面 的 代码 段 n。 

条 件 语 句 可 以 嵌 套 使 用 ,也 就 是 说 上 述 代码 段 还 可 以 再 包含 条 件 语 句 , 此 项 功能 使 得 用 
户 能 设计 出 条 件 更 复杂 的 程序 ,只 要 用 户 愿 意 ,完全 可 以 按照 自己 的 要 求 来 选择 条 件 嵌 套 的 


层 数 。 

3. 循环 结构 

循环 结构 是 程序 依据 预先 设 定 的 条 件 是 否 成 立 反 复 执行 
相同 的 代码 段 , 当 条 件 不 成 立时 退出 循环 。 循环 结构 主要 是 用 
for 语句 和 while 语句 实现 的 。 循 环 结构 的 示意 图 如 图 9-6 
所 示 。 

1) for 循环 

for 循环 比较 灵活 ,应 用 最 为 广泛 ,其 循环 结构 如 下 : 

for( 初 始 化 ;循环 条 件 ; 步 进 ) 


程序 入口 
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{ 
循环 体 

} 

2) while 循环 

while 的 中 文 意思 是 “ 当 …… 的 时 候 ”, 所 以 while 循环 表示 当 条 件 满足 表达 式 的 时 候 再 
执行 循环 体 。 它 的 结构 如 下 : 

while( 循 环 条 件 ) 

{ 

循环 体 

} 

无 论 是 for 循环 还 是 while 循环 ,在 设计 时 都 要 注意 死 循 环 。 所 谓 死 循环 就 是 用 来 作为 
判断 的 条 件 始终 成 立 ,程序 将 不 停 地 循环 ,不 能 正常 退出 ,导致 异常 情况 发 生 。 循 环 变量 的 
边界 值 是 最 容易 出 错 的 ,如 循环 变量 的 初 值 或 终 值 设 定 不 对 ,使 得 程序 多 循环 或 少 循 环 , 从 
而 发 生 不 可 预料 的 结果 。 对 于 以 上 两 点 大 家 在 编程 时 要 特别 小 心 。 

另外 ,还 有 其 他 的 循环 语句 ,如 for...in for each...in 以 及 break .continue、swith 等 ,由 
于 初学 者 用 得 比较 少 , 这 里 不 再 袭 述 ,对 编程 感 兴趣 的 同学 可 以 参考 网 上 的 相关 资料 。 
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1.【 动 作 了 面板 


若 要 创建 庶 入 到 FLA 文件 中 的 脚本 ,可 以 直接 将 ActionScript 输入 到 【动作 了 面板 中 ， 
选择 菜单 栏 中 的 [窗口 I【 动 作 ] 命 令 或 者 按 F9 键 可 以 打开 【动作 面板 。 

【动作 面板 由 4 个 部 分 构成 , 即 动作 工具 箱 ( 按 类 别 对 ActionScript 元 素 进行 分 组 ) 、 脚 
本 导航 器 (可 以 快速 地 在 Flash 文档 中 的 脚本 间 导 航 )、 脚 本 窗口 (可 以 在 其 中 输入 
ActionScript 代码 ) 和 面板 选项 菜单 。 

1) 动作 工具 箱 

如 果 将 ActionScript 元 素 插入 到 脚本 窗口 中 ,可 以 双击 该 元 素 ,或 直接 将 它 拖 动 到 脚本 
窗口 。 动 作 工 具 箱 将 项 目 进行 了 分 类 ,并 且 提 供 了 按 字母 顺序 排列 的 索引 。 

2) 脚本 导航 器 

单 击 脚本 导航 器 中 的 某 一 项 目 ,与 该 项 目 关 联 的 脚本 将 显示 在 脚本 窗口 中 ,并 且 播放 头 
将 移动 到 时 间 轴 上 的 相应 位 置 。 双 击 脚本 导航 器 中 的 某 一 项 目 可 固定 脚本 (将 其 锁定 在 当 
前 位 置 ) 。 

3) 脚本 窗口 

如 果 同 时 打开 多 个 外 部 文件 ,文件 名 将 显示 在 沿 脚本 窗口 顶部 排列 的 选项 卡 上 。 

在 脚本 窗口 中 可 以 使 用 以 下 功能 :“ 添 加 ”( 十 ) 菜 单 (类 似 动作 工具 箱 ) .查找 和 替换 、 语 
法 检查 、 语 法 着 色 、 自 动 套 用 格式 、 代 码 提 示 、 代 码 注释 、 代 码 折 一、 调试 选项 ( 仅 限 
ActionScript 文件 ) 和 自动 换行 。 使 用 脚本 窗口 可 以 显示 行 号 和 隐藏 字符 。 

脚本 窗口 不 具有 代码 帮助 功能 ,例如 脚本 导航 器 、 肢 本 助手 模式 和 行为 ,这 些 功能 只 有 
在 创建 Flash 文件 时 才 有 用 ,对 创建 外 部 脚本 文件 没有 帮助 。 
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4) 面板 选项 菜单 
该 菜单 中 包含 适用 于 【动作 了 面板 的 命令 和 首选 参数 ,例如 可 以 设置 行 号 和 自动 换行 . 访 
问 ActionScript 首选 参数 以 及 导入 或 导出 脚本 。 


2. 给 帧 添加 动作 


给 关键 帧 指定 一 个 动作 ,以 使 电影 在 到 达 那 一 帧 时 做 一 些 事 情 , 也 是 控制 时 间 轴 的 动作 。 
常见 的 就 是 对 时 间 轴 的 控制 ,对 时 间 轴 的 控制 一 般 使 用 play() (播放 )、gotoAndPlay() 
( 跳 转 到 某 一 帧 播放 ) .stop()( 停 止 ) .gotoAndStop()( 跳 转 到 某 一 帧 停止 ) 语 句 。 


3. 给 按钮 添加 动作 


为 按钮 实例 添加 动作 ,可 以 使 用 户 在 按 下 鼠标 或 者 在 鼠标 经 过 按钮 等 其 他 事件 触发 时 
执行 动作 ,给 一 个 按钮 实例 添加 动作 不 会 影响 其 他 按钮 的 动作 。 

当 给 一 个 按钮 添加 动作 时 ,可 以 指定 触发 动作 的 鼠标 事件 ,也 可 以 指定 一 个 触发 动作 的 
键盘 中 的 某 一 键 。 

当 给 按钮 设置 动作 时 ,必须 把 该 动作 嵌 套 在 鼠标 事件 on(mouse event) 处 理 程序 中 ,并 
指定 触发 该 动作 的 鼠标 或 键盘 事件 ,其 基本 表达 式 如 下 : 

on( 鼠 标 事件 ){ 

控制 语句 ， 

} 

常见 的 控制 语句 有 play() 、stop() ,gotoAndPlayQO( 跳 转 到 某 一 帧 或 者 某 场景 的 某 一 帧 
播放 ) .gotoAndStop( 跳 转 到 某 一 帧 或 者 某 场景 的 某 一 帧 停止 ) 。 


4. 给 影片 剪辑 元 件 添加 动作 


通过 为 影片 剪辑 指定 动作 ,可 以 在 影片 剪辑 元 件 加 载 或 接收 到 数据 时 让 影片 执行 动作 。 
和 为 按钮 添加 动作 一 样 ,必须 将 动作 指定 给 影片 剪辑 元 件 的 一 个 实例 。 影 片 剪辑 元 件 的 鼠 
标 事件 如 表 9-3 所 示 。 


表 9-3 ”影片 剪辑 元 件 的 鼠标 事件 一 览 表 


鼠标 事件 触发 条 件 
load 当 影 片 片段 第 一 次 加 载 到 时 间 轴 时 会 触发 本 事件 一 次 
unLoad 当 影 片 片段 被 删除 时 会 触发 本 事件 一 次 


enterFrame 影片 片段 加 载 时 间 轴 时 ,不 论 是 放映 还 是 停止 状态 ,都 会 不 断 触 发 本 事件 ,所 以 只 要 
此 片段 被 加 载 , 此 事件 会 一 直 不 断 地 执行 ,直到 影片 片段 被 删 为 止 

mouseDown 当 鼠 标 左 键 被 按 下 时 会 触发 本 事件 一 次 

mouseUp 当 按 下 的 鼠标 左 键 被 放 开 时 会 触发 本 事件 一 次 

mouseMove 只 要 在 场景 中 移动 鼠标 就 会 不 断 触 发 本 事件 

keyDown 当 键 盘 被 按 下 时 会 触发 本 事件 

keyUp 当 已 按 下 的 键盘 被 松 开 时 会 触发 本 事件 一 次 

data 当 在 loadVariables ( ) 或 loadMovie ( ) 动作 中 接收 数据 时 启动 此 动作 。 当 与 
loadVariables() 动 作 一 起 指定 时 ,data 事件 只 在 加 载 最 后 一 个 变量 时 发 生 一 次 ; 当 与 
loadMovie() 动 作 一 起 指定 ,获取 数据 的 每 一 部 分 ,data 事件 重复 发 生 
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当 为 影片 剪辑 元 件 指定 动作 时 ,必须 将 动作 肉 套 在 onClipEvent 处 理 函数 中 ,并 指定 触 
发 该 动作 的 剪辑 事件 ,表达 式 如 下 : 

onClipEvent( 鼠 标 事件 ){ 

控制 语句 ; 

} 

用 于 控制 影片 剪辑 元 件 的 动作 主要 有 startDrag (开始 拖 动 )、stopDrag (停止 拖 动 )、 
duplicateMovieClip( 复 制 影片 剪辑 元 件 ) removeMovieClip( 删 除 影片 剪辑 元 件 ) .tellTarget 
(指定 影片 剪辑 元 件 ) .setProperty( 设 置 属 性 ) 等 。 


@.4 综合 应 用 
A 


9.4.1 星空 的 制作 


制作 一 个 类 似 于 星空 的 动画 , 球 沿 着 给 定 的 圆 环 运动 ,由 小 变 大 ,其 操作 步骤 如 下 : 

(1) 选择 菜单 栏 中 的 【文件 ] 民 新 建 ] 命 令 ,建立 一 个 500 像素 X500 像素 大 小 的 Flash 
文档 。 

(2) 选择 菜单 栏 中 的 [文件 〗IK 导 入 〗IK 导 入 到 库 ] 命 令 , 将 "路径" 素材 图 片 和 “ 球 ” 素 材 
图 片 导入 到 库 中 。 

(3) 单 击 “ 图 层 1” 的 第 1 帧 ,将 "路径 ”素材 拖 至 舞台 上 ,并 调整 好 位 置 ,如 图 9-7 所 示 。 

(4) 创建 “图 层 2”, 将 “ 球 ” 素 材 拖 至 舞台 上 ,然后 选中 “ 球 ”, 选 择 菜 单 栏 中 的 [修改 】I【 转 
换 为 元 件 ] 命 令 ,将 小 球 转换 为 图 形 元 件 , 如 图 9-8 所 示 。 

(5) 选中 “图 层 2”, 右 击 【图 层面 板 , 在 弹出 的 快捷 菜单 中 选择 【添加 传统 运动 引导 层 】 
命令 ,为 “图 层 2" 添 加 和 运动 引导 层 。 然 后 选择 铅笔 工具 ,在 引导 层 上 绘制 螺旋 线 ,并 在 中 间 
部 分 用 橡皮 擦 擦 除 一 小 块 ,如 图 9-9 所 示 。 


球 拖 至 橡皮 擦 擦 除 的 地 方 的 顶点; 在 第 22 帧 插入 关键 帧 ,将 小 球 拖 至 橡皮 擦 擦 除 的 地 方 的 
另 一 个 顶点 ; 在 第 45 帧 插入 关键 帧 , 拖 动 小 球 到 线 最 外 面 的 顶点 ; 用 鼠标 在 1 一 21 帧 之 间 
的 任意 帧 右 击 , 在 弹出 的 快捷 菜单 中 选择 [创建 传统 补 间 ] 命 令 , 同 样 ,在 22 一 45 帧 之 间 也 创 
建 传统 补 间 动 画 ,【 时 间 轴 面板 如 图 9-10 所 示 。 

(7) 单 击 小 球 所 在 图 层 的 第 1 帧 ,选择 小 球 ,使 用 任意 变形 工具 将 小 球 调 小 。 同 样 ,在 
第 21 帧 将 小 球 调 大 一 些 ,在 第 45 帧 将 小 球 调 得 更 大 一 些 , 如 图 9-11 所 示 。 
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图 9-10 【时 间 轴 3 面板 


(8) 保存 ,预览 ,最 终 效果 如 图 9-12 所 示 。 


图 9-11 关键 帧 的 小 球 修改 图 9-12 星空 案例 的 最 终 效果 


9.4.2 ”Banner 的 制作 


制作 一 个 Banner, 曲 线 颜 色 渐变 ,文字 一 个 一 个 出 现 , 其 操作 步 又 如 下 : 
(1) 选择 莱 单 栏 中 的 【文件 了 民 新 建 ] 命 令 ,创建 一 个 480 像素 X60 像素 大 小 的 Flash 文 
档 , 如 图 9-13 所 示 。 


图 9-13 新 建文 件 


(2) 选择 矩形 工具 ,绘制 一 个 480 像素 X60 像素 大 小 的 矩形 ,并 用 浅 蓝 到 深蓝 线性 渐变 
填充 ,然后 使 用 渐变 变形 工具 调整 渐变 的 方向 ,如 图 9-14 所 示 。 


图 9-14 绘制 并 编辑 矩形 
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(3) 单 击 【 时 间 轴 面板 中 的 [新 建 图 层 ] 按 钮 新 建 “ 图 层 2”, 然 后 选择 钢笔 工具 ,选中 “图 
层 2”, 在 舞台 上 单 击 3 次 得 到 一 个 线段 ,并 利用 转换 锚 点 工具 将 尖 角 处 转换 为 圆 角 ,调整 线 
段 ,得 到 一 个 弧 线 ,再 选择 油漆 桶 工具 ,从 白色 到 黑色 线性 渐变 填充 ,如 图 9-15 所 示 。 


图 9-15 绘制 并 编辑 弧 线 


(4) 单 击 时 间 轴 的 第 10 帧 ,然后 右 击 , 在 快捷 菜单 中 选择 [插入 关键 帧 ] 命 令 ,在 [颜色 】 
面板 中 调整 线性 填充 色 带 中 的 色 标 位 置 ; 同样 ,在 第 20 帧 插入 关键 帧 ,调整 线性 填充 ; 在 
1 一 10 帧 .11 一 20 帧 之 间 创 建 补 间 形 状 , 如 图 9-16 所 示 。 


图 9-16” 弧 线 颜色 渐变 


(5) 单 击 【时 间 轴 面板 中 的 [新建 图 层 ] 按 钮 新 建 “图 层 3”, 然 后 选择 工具 箱 中 的 文本 工 
具 ,在 舞台 上 单 击 输入 文字 “hello world!111”; 选中 文字 ,在 【属性 了 面板 中 设置 字体 为 Arial、 
大 小 为 30 点 、 颜 色 为 白色 、 字 母 间距 为 5, 如 图 9-17 所 示 。 


hello world!!! 


图 9-17 编辑 文字 
(6) 用 同样 方法 新 建 “ 图 层 4”, 然 后 选择 第 1 帧 ,使 用 矩形 工具 在 文字 最 左 侧 绘制 一 个 
小 矩形 ,以 任意 颜色 填充 ,无 边框 ; 在 第 20 帧 插入 关键 帧 ,使 用 任意 变形 工具 拖 动 小 矩形 使 
其 变 大 ,覆盖 文字 ,如 图 9-18 所 示 。 


图 9-18 编辑 图 层 4 


(7) 选中 最 上 面 的 “图 层 4”, 然 后 右 击 ,在 快捷 菜单 中 选择 【 谈 妞 层 ] 命 令 , 最 终 效果 如 
图 9-19 所 示 。【 时 间 轴 面板 如 图 9-20 所 示 。 
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图 9-19 ”Banner 的 最 终 效果 


图 9-20 【时 间 轴 ] 面 板 


9.4.3 动作 按钮 的 应 用 


制作 动作 按钮 ,用 按钮 控制 影片 剪辑 的 播放 与 停止 ,其 操作 步骤 如 下 : 

(1) 将 9.4.1 节 中 动画 的 所 有 帧 全 部 选中 ,选择 菜单 栏 中 的 [插入 】I【[ 新 建 元 件 ] 命 令 ， 
在 元 件 编辑 窗口 中 右 击 ,在 快捷 菜单 中 选手 [粘贴 帧 ] 命 令 ,将 该 动画 转换 为 一 个 影片 剪辑 ， 
命名 为 “影片 "。 选 择 菜单 栏 中 的 【文件 ] 民 新 建 ] 命 令 ,创建 一 个 480 像素 X120 像素 大 小 的 
Flash 文档 ,保存 ,命名 为 “按钮 动作 ”*"。 将 上 述 影 片 剪辑 拖 到 “按钮 动作 ”文件 库 中 ,并 应 用 
到 舞台 ,移动 到 适当 位 置 ,如 图 9-21 所 示 。 


图 9-21 影片 剪辑 


(2) 新 建 “图 层 2”, 选 择 菜 单 栏 中 的 [窗口 I【 公 共 库 】button 命令 ,在 打开 的 [外 部 库 】 
面板 中 选择 想 要 的 按钮 ,将 其 拖 入 舞台 中 。 如 图 9-22 所 示 , 拖 入 一 个 播放 按钮 ,一 个 暂停 
按钮 。 


图 9-22 在 影片 剪辑 中 加 入 按钮 


(3) 选择 “图 层 1” 中 的 影片 剪辑, 在 [属性] 面板 中 将 其 实例 名 称 命名 为 mec。 选择 “图 层 2” 
中 的 播放 按钮 ,命名 为 my_buttonplay, 选 择 停止 按钮 命名 为 my_buttonstop 放 属性 了 面板 如 
图 9-23 所 示 。 
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图 9-23 【属性 ] 面 板 


(4) 单 击 播放 按钮 ,选择 菜单 栏 中 的 [窗口 I【 动 作 ] 命 令 , 打 开 [ 动 作 ] 面 板 , 选 择 * 图 层 2” 
的 第 1 帧 ,在 动作 窗口 中 输入 以 下 代码 : 


my_buttonplay. addEventListener(MouseEvent. MOUSE_DOWN, funonDown) ; 
function funonDown(e:MouseEvent){ 

mc. play() 

} 

my_buttonstop. addEventListener(MouseEvent. MOUSE_DOWN, funonup); 
function funonup(e:MouseEvent){ 

mc, stop() 

} 


(5) 保存 、 预 览 。 


HTML 与 CSS 网 页 设计 基础 


本 章 学 习 目 标 : 

避 了 和 解 HTML 的 概念 及 特点 。 

如 了 解 CSS 的 概念 及 特点 。 

避 掌 握 Dreamweaver 的 常用 操作 。 


(10.1 HTML 简介 
A 


HTML 是 使 用 特殊 标记 来 描述 文档 结构 和 表现 形式 的 一 种 语言 ,由 W3C(World Wide 
Web Consortium) 所 制定 和 更 新 。 我 们 可 以 用 任何 一 种 文本 编译 器 来 编辑 HTML 文件 , 因 
为 它 就 是 一 种 纯 文本 文件 。 


10.1.1 HTML 的 概念 


HTML(HyperText Mark-up Language) 即 超 文 本 标记 语言 ,是 WWW 的 描述 语言 。 
它 是 用 于 创建 可 跨 平台 的 超 文本 文档 的 一 种 简单 标记 语言 , 它 是 由 HTML 命令 组 成 的 描 
述 性 文本 ,不仅 可 以 用 来 描述 文字 、 图 形 动画 声音、 表格 .链接 等 ,同时 它 又 通过 标记 
(TAG) 来 指明 网 页 中 的 文字 、 图 像 ,动画 等 元 素 是 如 何 显示 的 。 

使 用 HTML 语言 编写 的 脚本 一 般 被 称 为 网 页 或 HTML 文档 , 它 的 文件 扩展 名 通常 
为 . htm 或 . html。 


10.1.2 HTML 的 产生 及 特点 


HTML 作为 定义 万 维 网 的 基本 规则 之 一 ,最 初 由 蒂 姆 。 伯 纳 斯 - 李 (Tim Berners-Lee) 
于 1989 年 在 CERN(Conseil Europeen pour la Recherche Nucleaire) 研制 出 来 。 它 里 面包 
含 了 大 约 20 个 用 来 标记 网 页 的 HTML 标记 ,他 直接 借用 了 SGML 的 标记 格式 ,也 就 是 后 
来 人 们 看 到 的 HTML 标记 格式 ,在 后 期 逐渐 发 展 ,不 断 产生 新 型 的 、 功 能 强大 且 生 动 有 趣 
的 标记 形式 ,到 1999 年 12 月 24 日 ,W3C 推荐 的 标准 HTML 4.01 加 入 了 很 多 特定 浏览 器 
的 元 素 和 属性 ,但 是 同时 也 开始 “清理 ”这 个 标准 ,把 一 些 元 素 和 属性 标记 为 过 时 ,建议 人 们 
不 再 使 用 它们 。 目 前 HTML 的 最 高 版 本 为 5. 0, 它 与 CSS 结合 得 更 加 密切 。 

HTML 文档 的 制作 不 是 很 复杂 , 且 功 能 强大 ,支持 不 同 数据 格式 的 文件 嵌入 ,这 也 是 
WWW 盛行 的 原因 之 一 ,其 主要 特点 如 下 : 
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1. 简易 性 
HTML 版 本 升级 采用 超 集 方式 ,从 而 更 加 灵活 .方便 。 
2. 可 扩展 性 


HTML 语言 的 广泛 应 用 带 来 了 加 强 功能 .增加 标识 符 等 要 求 ,HTML 采取 子 类 元 素 的 
方式 ,为 系统 的 扩展 带 来 保证 。 


3. 平台 无 关 性 
虽然 PC 大 行 其 道 , 但 使 用 MAC 等 其 他 机 器 的 大 有 人 在 ,HTML 可 以 被 用 在 广泛 的 平 


台 上 。 


10.1.3 HTML 和 XHTML 


HTML 和 XHTML 的 区 别 简 单 来 说 就 是 XHMTL 是 语法 要 求 更 加 严格 的 HTML， 
XHTML 可 以 认为 是 XML 版 本 的 HTML。 

XHTML 解决 了 HTML 语言 所 存在 的 严重 制约 其 发 展 的 问题 。HTML 发 展 到 今天 
存在 3 个 主要 缺点 : 不 能 适应 越 来 越 多 的 网 络 设备 和 应 用 的 需要 ,例如 手机 、PDA .信息 家 
电 都 不 能 直接 显示 HTML; 由 于 HTML 代码 不 规范 、 爱 肿 ,浏览 器 需要 足够 智能 和 庞大 才 
能 正确 显示 HTML; 数据 与 表现 混杂 ,这 样 的 页 面 要 改变 显示 就 必须 重新 制作 HTML。 于 
是 W3C 又 制定 了 XHTML 标准 ,XHTML 是 HTML 向 XML 过渡 的 一 个 “桥梁 ”。 


fo.2 CSS 简介 


CSS 算是 网 页 设计 的 一 个 突破 , 它 解决 了 网 页 界面 排版 的 难题 。 可 以 这 么 说 , HTML 
主要 是 定义 网 页 的 内 容 (Content) ,而 CSS 决定 这 些 网 页 内 容 如 何 显示 (Layout) 。 


10.2.1 CSS 的 概念 


CSS 语言 是 “Cascading Style Sheets" 的 缩写 ,中 文 翻译 为 “ 层 释 式样 式 表单 ”, 它 是 由 
W3C 协会 制定 并 发 布 的 一 个 网 页 排版 标准 ,是 一 种 用 来 表现 HTML( 标 准 通用 标记 语言 的 
一 个 应 用 ) 或 XML( 标 准 通用 标记 语言 的 一 个 子 集 ) 等 文件 样式 的 计算 机 语言 ,是 对 HTML 
语言 功能 的 补充 ,主要 的 用 途 是 对 网 页 中 字体 .颜色 背景、 图 像 及 其 他 各 种 元 素 的 控制 ,使 
网 页 能 够 完全 按照 设计 者 的 要 求 来 显示 。CSS 语言 是 一 个 用 于 网 页 排版 的 标记 性 语言 。 


10.2.2 CSS 的 发 展 与 特点 


1994 年 哈 坤 。 利 提出 了 CSS 的 最 初 建议 。 伯 特 ， 波 斯 (Bert Bos) 当 时 正在 设计 一 个 
叫 Argo 的 浏览 器 ,他 们 决定 一 起 合作 设计 CSS。 

当时 已 经 有 一 些 样 式 表 语 言 的 建议 ,但 CSS 是 第 一 个 含有 “ 层 释 ”的 思想 的 。 在 CSS 
中 ,一 个 文件 的 样式 可 以 从 其 他 的 样式 表 中 继承 下 来 。 设 计 者 在 有 些 地 方 可 以 使 用 他 自己 
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更 喜欢 的 样式 ,在 其 他 地 方 则 继承 ,或 “ 层 释 ”作者 的 样式 ,这 种 层 倒 的 方式 使 作者 和 读者 都 
可 以 灵活 地 加 入 自己 的 设计 ,混合 各 人 的 爱好 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ,1995 年 他 与 波斯 一 
起 再 次 展示 这 个 建议 。 当 时 W3C 刚刚 建立 ,W3C 对 CSS 的 发 展 很 感 兴趣 ,为 此 组 织 了 一 
次 讨论 会 。 哈 坤 ` 波 斯 和 其 他 一 些 人 (例如 微软 公司 的 托马斯 。 雷 尔 登 ) 是 这 个 项 目的 主要 
技术 负责 人 。1996 年 底 ,CSS 已 经 完成 。1996 年 12 月 ,CSS 要 求 的 第 一 个 版 本 被 出 版 。 

1997 年 初 , W3C 内 组 织 了 专门 管理 CSS 的 工作 组 ,其 负责 人 是 克 里 斯 。 里 雷 。 这 个 工 
作 组 开始 讨论 第 一 版 中 没有 涉及 的 问题 ,其 结果 是 在 1998 年 5 月 出 版 的 第 二 版 要 求 。 到 目 
前 为 止 ,第 三 版 已 经 完备 。 

采用 CSS 十 DIV 进行 网 页 重 构 相 对 于 传统 的 TABLE 网 页 布局 而 言 具 有 以 下 3 个 显著 
优势 ; 


1. 表现 和 内 容 相 分 离 


将 设计 部 分 剥离 出 来 放 在 一 个 独立 样式 文件 中 ,HTML 文件 中 只 存放 文本 信息 ,这 样 
的 页 面 对 搜索 引擎 更 加 友好 。 
2. 提高 页 面 浏览 速度 


对 于 同一 个 页 面 视觉 效果 ,采用 CSS 十 DIV 重 构 的 页 面容 量 要 比 TABLE 编码 的 页 面 
文件 容量 小 得 多 ,前 者 一 般 只 有 后 者 的 1/2 大 小 ,浏览 器 就 不 用 去 编译 大 量 宛 长 的 标签 了 。 


3. 易于 维护 和 改版 
用 户 只 要 简单 地 修改 几 个 CSS 文 件 就 可 以 重新 设计 整个 网 站 的 页 面 。 


10.2.3 CSS 在 网 页 中 的 应 用 


CSS 最 重要 的 作用 是 将 HTML 页 面 的 内 容 和 它 的 显示 分 隔 开 来 。 在 CSS 出 现 以 前 ， 
几乎 所 有 的 HTML 文件 内 都 包含 文件 显示 的 信息 ,如 字体 的 颜色 .背景 应 该 是 怎样 的 ,如 
何 排列 ,边缘 连 线 等 必须 一 一 在 HTML 文件 中 列 出 ,有 时 甚至 重复 列 出 。CSS 使 HTML 
页 面 开发 者 可 以 将 这 些 信息 中 的 大 部 分 隔离 出 来 ,简化 了 HTML 文件 ,这 些 信息 被 放 在 一 
个 辅助 的 用 CSS 语言 写 的 文件 中 ,HTML 文件 中 只 包含 结构 和 内 容 的 信息 ,CSS 文件 中 只 
包含 样式 的 信息 。 

CSS 样式 信息 可 以 包含 在 一 个 附件 中 ,也 可 以 包含 在 HTML 文件 中 ,不 同 的 媒体 可 以 
使 用 不 同 的 样式 表 , 例 如 一 个 文件 在 显示 器 上 的 显示 可 以 与 在 打印 机 中 打印 出 的 显示 不 同 ， 
这 样 页 面 浏览 者 就 有 更 大 的 控制 显示 的 自由 。 


(i0,3 Dreamweaver CS6 的 应 用 


编写 HTML 和 CSS 有 两 种 方法 ,一 种 是 手工 直接 编写 , 即 利用 任何 的 文本 编辑 器 打开 
并 编写 ; 另 一 种 是 利用 可 视 化 软件 编写 ,如 Frontpage、Dreamweaver 等 。 


176 
SMA 


Web 前 端 开发 及 应 用 教程 


10.3.1 窗口 界面 


Adobe Dreamweaver CS6 是 美国 Macromedia 公司 开发 的 可 视 化 网 页 编辑 器 , 它 将 网 
页 制作 和 网 站 管理 集 于 一 身 ,是 目前 常见 的 所 见 即 所 得 的 网 页 编辑 软件 。 图 10-1 所 示 的 是 
Dreamweaver CS6 的 窗口 主 界面 。 


图 10-1 Dreamweaver CS6 窗口 界面 


该 窗口 由 菜单 栏 ,插入 栏 文档 工具 栏 文档 窗口 面板 组 及 [属性] 面板 组 成 ,具体 如 下 ; 
。 菜单 栏 : Dreamweaver 中 共 包 含 文件 、 编 辑 等 10 个 菜单 。 

。 插入 栏 : 包含 用 于 创建 和 插入 对 象 的 按钮 。 

。 文档 工具 栏 : 包含 [代码 】【 拆 分 】 设计] 等 按钮 。 

。 文档 窗口 : 用 于 显示 当前 文档 。 

。 面板 组 : 列 出 Dreamweaver 中 的 所 有 控制 面板 ,可 显示 和 隐藏。 

。【 属 性 ] 面 板 : 列 出 与 当前 选择 内 容 相 关 的 属性 。 


10.3.2 基本 网 页 的 制作 


1. 创建 站 点 


先 建立 一 个 文件 夹 , 称 为 站 点 根 目录 ,然后 选择 菜单 栏 中 的 [站 点 了 民 新 建站 点 了 命令 ,在 
站 点 设置 对 话 框 中 进行 相应 设置 ,如 图 10-2 所 示 。 

至 此 站 点 建立 完毕 ,以 后 可 以 随时 编辑 修改 这 个 站 点 的 相关 属性 。 在 【文件 了 面板 中 右 
击 已 经 建立 的 站 点 ,然后 新 建文 件 夹 ,分 别 建立 index 和 image 文件 夹 ,之 后 就 可 以 把 制作 
页 面 时 用 到 的 图 .Banner\ 背 景 图 等 先 放 在 image 文件 夹 里 ,方便 在 需要 插入 图 片 等 元 素 时 


使 用 。 


图 10-2 站 点 设置 对 话 框 


2. 新 建 网 页 


选择 菜单 栏 中 的 【文件 ] 民 新 建 3 民 新 建文 档 ] 命 令 ,打开 【新 建文 档 ] 对 话 框 ,在 其 中 选择 
新 建 的 文档 类 型 ,如 图 10-3 所 示 , 单 击 [ 创 建 ] 按 钮 建立 所 需 的 文件 。 


Colapusion 组 件 
JsP 
PP 


Xs East 
布局 css 位 置 , [ 深 加 术 档 关 


附加 Css 文件 : 四 可 


口 启用 InCentext Editing 
CE ao 


10-3 【新 建文 档 ] 对 话 框 
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SA 


3. 设置 网 页 属性 


网 页 页 面 属性 包括 网 页 的 “外 观 ”“ 链 接 ”“ 标 题 "“ 标 题 /编码 ”和 “跟踪 图 像 ” 等 。 
选择 菜单 栏 中 的 [修改 】I【 页 面 属性 命令 ,在 弹出 的 [页 面 属性 对话 框 中 设置 页 面 属 
性 ,如 图 10-4 所 示 。 


外 观 ss) 


页 面 字体 FF) 默认 字体 

大 小 G) ~ 区 = 
文本 颜色 0): 加 | 
背 录 颜色 G): 国 
背景 图 像 0) 


重 夏 EE) = 


左边 距 员 区 本 右边 中 中 


上 边 距 0) [rx | 下 边 距 p) 


TT CE 


图 10-4 【页 面 属性 对 话 框 


【外 观 (CSS)] 列 表 框 : 在 其 中 对 网 页 的 字体 、 字 号 、 字 的 颜色 、 背 景 图 像 及 颜色 、 边 距 
进行 设置 。 

*【 外 观 (HTML)] 列 表 框 : 设置 背景 图 像 及 颜色 、 超 链接 的 文本 颜色 、 边 距 等 。 

【链接 (CSS)】: 设置 链接 的 字体 、 字 号 ,不同 状态 链接 的 颜色 ,以 及 下 划 线 。 

。*【 标 题 (CSS)】: 设置 网 页 中 标题 的 样式 , 即 从 标题 1 到 标题 6 的 样式 。 

“【 标 题 /编码 了 : 设置 本 网 页 的 网 页 标题 .编码 格式 及 文档 类 型 等 。 

【跟踪 图 像 】: 设置 跟踪 图 像 的 属性 。 跟 踪 图 像 一 般 在 设计 网 页 时 作为 网 页 背景 ,用 
于 引导 网 页 的 设计 。 


4. 文字 


在 网 页 中 文字 是 最 基本 的 组 成 元 素 ,在 输入 文字 后 可 以 对 文字 进行 相应 的 格式 化 操 
作 ,图 10-5 所 示 为 文字 的 [属性 面板 ,在 其 中 可 以 为 文字 设置 格式 、ID、 类 链接、 加 粗 、 余 
体 、 项 目 列表 编号 列表 、 删 除 内 缩 区 块 .内 缩 区 块 .标题 \ 目 标 、 页 面 属性 、 列 表 项 目 等 
属性 。 


图 10-5 文字 【属性 了 面板 


第 10 章 HTML 与 CSS 网 页 设计 基础 NY 


5. 图 片 
Dreamweaver 中 常用 的 图 片 格式 有 3 种 , 即 GIF、JPEG、PNG。 
1) 插入 图 像 


选择 菜单 栏 中 的 [插入 〗I[ 图 像 ] 命 令 , 在 打开 的 【选择 图 像 源 文件 ] 对 话 框 中 选择 图 像 ， 
单 击 【确定 按钮 ,如 图 10-6 所 示 。 


站 点 根 目录 
站 点 和 服务 器 


* 回应 已 国 - 


Eile:///C |/Vsers/wln/Docunents/ 
{mF Be ioe 
在 站 点 定义 中 更 敢 黑 认 的 权 接 相对 于 
要 使 用 此 选 顺 ,请 保存 文件 。 


图 10-6 【选择 图 像 源 文件 ] 对 话 框 


2) 图 像 [ 属 性 了 面板 
单 击 需要 修改 属性 的 图 像 .【 属 性 面板 随 之 变 为 图 像 [ 属 性 3 面板 ,如 图 10-7 所 示 。 


om yo 


图 10-7 图 像 [属性 ] 面 板 


其 中 包括 图 像 人 D、 宽 、 高 源 文件 、 链 接 、 替 换 、 类 编辑 、 地 图 、 重 直 边 距 、 水 平 边 距 \ 目 
标 \ 原 始 、 边 框 、 对 齐 等 基本 设置 。 

3) 图 像 热 区 链接 

图 像 热 区 指 在 一 幅 图 片上 创建 多 个 区 域 (热点 ) ,并 可 以 单 击 触发 。 当 用 户 单 击 某 个 热 
点 时 会 发 生 某 种 链接 或 行为 。 

选中 图 像 , 在 图 像 [属性 ] 面 板 中 使 用 热 区 工具 (矩形, 椭圆、 多边形 ) 在 图 像 上 划分 热 区 ， 
并 为 绘制 的 每 一 个 热 区 设置 不 同 的 链接 地 址 和 替代 文字 。 
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6. 超 链接 


1) 什么 是 超 链 接 

所 谓 的 超 链 接 是 指 从 一 个 网 页 指向 一 个 目标 的 连接 关系 ,这 个 目标 可 以 是 另 一 个 网 页 ， 
也 可 以 是 相同 网 页 上 的 不 同位 置 , 还 可 以 是 一 个 图 片 .一 个 电子 邮件 地 址 、 一 个 文件 ,甚至 是 
一 个 应 用 程序 。 

2) 创建 超 链接 

(1) 到 网 站 内 页 面 的 超 链接 一 一 内 部 链接 (在 网 站 内 部 页 面 之 间 创 建 相互 链接 关系 ): 

选中 页 面 中 的 文字 或 图 像 ,在 [属性] 面板 中 单 击 【 链 接 ] 栏 右 侧 的 文件 夹 图 标 ,通过 浏览 
选择 一 个 文件 。 

(2) 到 网 站 外 页 面 的 超 链 接 一 一 外 部 链接 : 

选中 文字 或 图 像 之 后 ,直接 在 【属性 面板 的 【链接 ] 栏 中 输入 外 部 的 链接 地 址 ,例如 
“http://www. 163. com”。 

(3) 到 网 页 某 一 特定 位 置 的 超 链接 一 一 锚 点 链接 : 

首先 创建 并 命名 锚 点 ,就 是 在 网 页 中 设置 位 置 标记 ,并 给 该 位 置 一 个 名 称 , 以 便 引 用 , 然 
后 在 [属性 了 面板 的 【链接 了 栏 中 直接 输入 划 锚 点 名 ”。 

(4) 创建 E-mail 电子 邮件 链接 : 

选中 文本 或 图 像 ,在 插入 栏 的 [电子 邮件 链接 3 中 输入 邮件 地 址 ,或 在 【属性 了 面板 的 【 链 
接 】 栏 中 直接 输入 “mailto :邮件 地 址 ”。 

(5) 创建 空 链接 : 

选中 要 制作 空 链接 的 对 象 , 在 【链接 ] 栏 中 直接 输入 “#”。 

3) 链接 的 目标 框架 

从 【目标 下拉 菜 单 中 选择 打开 文档 的 位 置 。 

。 _self: 在 当前 网 页 所 在 的 窗口 或 框架 中 打开 (默认 方式 ) 。 

。 _blank: 每 个 链接 会 创建 一 个 新 的 窗口 。 

。 _new: 在 同一 个 刚 创 建 的 窗口 中 打开 。 

。 _parent: 如 果 是 嵌 套 的 框架 , 则 在 父 框架 中 打开 。 

。 _top: 在 完整 的 浏览 器 窗口 中 打开 。 


10.3.3 表格 
1. 表格 的 作用 


(1) 存放 数据 。 
(2) 布局 页 面 。 


2. 插入 表格 


步骤 如 下 : 
(1) 单 击 网 页 中 需要 插入 表格 的 地 方 。 
(2) 在 菜单 栏 中 选择 [插入 】I【 表 格 ] 命 令 . 或 者 单 击 【 常 用 ] 工 具 栏 里 的 [表格] 按钮 ,或 
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者 按 Ctrl 十 Alt 十 工 键 , 打 开 图 10-8 所 示 的 对 话 框 ,在 对 话 框 中 对 表格 大 小 、 行 数 和 列 数 、 表 
格 宽度 、 单 元 格 边 距 、 单 元 格 间 距 进 行 设置 。 


图 10-8 【表格 ] 对 话 框 


3. 表格 [属性 ] 面 板 
选中 表格 ,在 表格 四 周 会 出 现 3 个 控制 点 ,此 时 【属性 了 面板 为 表格 【属性 了 面板 , 如 


Be 


图 10-9 所 示 。 


韦 训 0) 对齐 导 KW >] 关中 天 
到 EG) 边 稚 呈 )|: 


图 10-9 表格 【属性 了】 面板 
其 中 包含 有 表格 外 , 行 数列 数 、 宽 ,填充 、 间 距 、 类 、 边 框 \ 对 齐 、 清 除 列 宽 、 清 除 行 高 将 
表格 宽度 转 为 像素 ,将 表格 宽度 转 为 百分比 等 参数 。 


10.3.4 框架 


1. 建立 框架 
选择 菜单 栏 中 的 [修改 〗I【 框 架 集 ] 命 令 ,在 其 级 联 菜单 中 选择 一 种 框架 样式 ,分 别 对 每 


个 框架 内 的 网 页 进行 编辑 。 


2. 框架 的 属性 
首先 单 击 [ 窗 口 ] 菜 单 ,选择 [框架 命令 ,打开 [框架 ] 面 板 , 然 后 在 [框架] 面板 上 选择 框 


架 , 选 择 框 架 后 可 以 在 框架 [属性 面板 上 查看 框架 的 属性 ,如 图 10-10 所 示 。 
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图 10-10 框架 [属性 面板 


其 中 包括 框架 的 源 文件 ,框架 名 称 , 框 架 边框 .框架 是 否 深 动 、 框 架 边 距 、 边 框 颜色 以 及 
【不 能 调整 大 小 ] 复 选 框 。 


3. 框架 集 的 属性 


首先 单 击 【窗口 菜单 ,选择 [框架 ] 命 令 , 打 开 [ 框 架 ] 面 板 , 然 后 在 [框架] 面板 上 选择 框 
架 集 ,如 图 10-11 所 示 , 或 在 网 页 的 框架 上 单 击 ,也 可 以 将 [属性] 面板 显示 为 框架 集 的 【 属 
性 了 面板 。 


图 10-11 框架 集 [ 属 性 面板 
其 中 包括 边框 宽度 ,框架 大 小 、 边 框 颜 色 以 及 是 否 显 示 “ 边 框 ”。 
4. 保存 框架 和 框架 集 


1) 保存 框架 

将 鼠标 指针 置 于 要 保存 的 框架 ,选择 菜单 栏 中 的 [文件 3I【 保 存 框 架 ] 命 令 。 

2) 保存 框架 集 

选择 要 保存 的 框架 集 , 然 后 选择 菜单 栏 中 的 【文件 ] 民 保存 框架 页 3 或 者 [文件 ] 民 框架 集 
另存 为 3 命令。 

3) 保存 全 部 

这 是 保存 整个 框架 结构 ,在 保存 的 时 候 虚 线 单 住 的 部 分 就 是 用 户 现在 保存 的 框架 。 


5. 框架 删除 
拖 动 不 需 要 的 边框 和 其 他 边框 合并 ,或 者 拖 到 编辑 窗口 外 。 
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10.3.5 表单 
1. 什么 是 表单 


表单 是 用 户 与 计算 机 交互 的 一 种 有 效 手段 ,其 中 包含 文本 字段 .密码 字段 . 单 选 按钮 、 复 
选 框 等 表单 对 象 。 当 浏览 者 在 浏览 器 的 表单 内 填写 信息 并 单 击 【提交 】 按 钮 后 ,这 些 信息 会 
被 发 送 至 服务 器 ,服务 器 中 的 服务 器 端 脚 本 或 应 用 程序 对 这 些 信息 进行 处 理 , 以 此 进行 
响应 。 


2. 创建 表单 域 


1) 插入 表单 

选择 菜单 栏 中 的 【插入 了 区 表 单 ] 民 表单 命令 ,出现 红 色 虚 线 框 ,此 时 该 表单 内 的 所 有 内 
容 都 将 出 现在 此 红色 虚线 框 内 。 

2) 表单 【属性 了 面板 

插入 表单 后 ,【 必 性] 面板 改 为 表单 【属性 面板, 如 图 10-12 所 示 。 


,由 


Hie x 684v LK /1 WD nieods UP) 


图 10-12 ”表单 【属性 了 面板 


该 面板 中 包括 了 表单 ID ,动作 方法、 目标 、 编 码 类 型 .类 等 参数 。 

。*【 动 作 】: 表单 处 理 的 程序 。 

*【 方 法 】: 表单 提交 数据 的 方法 , 共 POST 和 GET 两 种 。 

3. 创建 表单 对 象 

选择 菜单 栏 中 的 【插入 了 代表 单 ] 命 令 ,在 级 联 菜单 中 选择 需要 的 表单 对 象 。 表 单 对 象 包 
括 文本 框 \ 密 码 框 , 单 选 按钮 . 复 选 框 \ 提 交 按 钮 、 重 置 按钮 ,图像 按钮 ,文件 域 .隐藏 域 、 下 拉 
列表 ,文本 域 等 。 


10.3.6 声音 和 动画 
1. 声音 


经 常 使 用 的 声音 格式 有 MP3 格式 .RealAudio 格式 .WMA 格式 .MID 格式 。 
1) 背景 音乐 
直接 插入 HTML 标记 : 


< bgsound src= "11.mp3”autostart = true loop = 一 1> 
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2) 将 插件 嵌入 到 网 页 中 

选择 菜单 栏 中 的 【插入 了 区 媒 体 ] 民 插件 了 命令 ,在 【属性 了 面板 中 单 击 【 链 接 栏 ] 文 本 框 劳 
边 的 文件 夹 图 标 以 浏览 音频 文件 ,或 者 在 [链接 栏 ] 文 本 框 中 输入 文件 的 路 径 ,通过 在 适当 的 
文本 框 中 输入 值 或 者 通过 在 文档 窗口 中 调整 插件 占 位 符 的 大 小 ,输入 宽度 和 高 度 , 这 些 值 确 
定 音 频 控件 在 浏览 器 中 以 多 大 的 尺寸 显示 。 


2. 动画 


在 网 页 中 可 以 使 用 动画 ,包括 GIF 动画 和 Flash 动画 ,其 中 Flash 动画 的 应 用 相当 广 
泛 ,要 想 在 网 页 中 应 用 Flash 动画 ,需要 将 Flash 动画 导出 为 SWF 格式 才能 插入 到 网 
页 中 。 

选择 菜单 栏 中 的 [插入 】I【 媒 体 】SWF 命令 ,打开 【选择 SWF] 对 话 框 ,在 其 中 找到 需要 
的 动画 , 单 击 【确定 3 按钮 即 可 。 


10.3.7 CSS 
1. 创建 样式 


选择 菜单 栏 中 的 [窗口 ]IKCSS 样式 命令, 调 出 CSS 样式 的 浮动 面板 ,如 图 10-13 所 示 ; 
单 击 面板 下 方 的 [新 建 CSS 样式 3 按钮 ,在 弹出 的 [新 建 CSS 规则 ] 对 话 框 (如 图 10-14 所 示 ) 
中 选择 样式 类 型 .命名 , 单 击 【确定 按钮 ; 在 [CSS 规则 定义 3 对 话 框 中 选择 具体 样式 内 容 ， 
如 图 10-15 所 示 。 


图 10-13 CSS 样式 的 浮动 面板 图 10-14 【新 建 CSS 规则 】 对 话 框 
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Pont-fanily F): 


Font-size(S): = Font-weight (1); 


Font-style CD: - Font-variant (); 


Line-height (): - Text-transforn (E) 


Text-decoration D): @] underli; calrf) : 国 
回 


图 10-15 【CSS 规则 定义 ] 对 话 框 


2. 应 用 样式 
如 果 是 外 部 样式 文件 ,需要 链接 。 如 果 是 内 部 样式 文件 ,需要 选中 相应 文字 ,套用 。 


本 章 学 习 目 标 : 

名 了 解 标记 及 规则 。 

名 掌握 HTML 中 的 常用 标记 及 属性 。 
局 掌握 HTML 网 页 的 制作 。 


(11.1 HTML 基础 
sp 

一 个 HTML 文件 就 是 一 个 静态 网 页 文件 , 既 可 以 用 记事 本 编辑 ,也 可 以 用 
Dreamweaver 编辑 。 


11.1.1 一 个 简单 的 HTML 实例 


下 面 用 记事 本 编写 第 一 个 HTML 文件 ,步骤 如 下 

(1) 单 击 [ 开 始 了 按钮 ,选择 【程序 ] 民 附件 ] 民 记事 本 了 命令 ,打开 记事 本 程序 。 

(2) 在 记事 本 中 直接 输入 下 面 的 内 容 。 

< html > 

< head > 

<title> 这 是 第 一 个 HTML 页 </title> 

</head> 

<body> 

hello world!!!! 

</body > 

</html > 

(3) 选择 菜单 栏 中 的 [文件 〗I【 保 存 ] 命 令 , 在 打开 的 [另存 为 3 对 话 框 中 为 文件 选择 保存 
位 置 ,输入 文件 名 ,将 文件 类 型 手工 改 为 . html, 如 图 11-1 所 示 , 单 击 【 保 存 ] 按 钮 。 

(4) 用 焉 浏览 。 


11.1.2 HTML 的 基本 结构 


HTML 网 页 文件 包含 两 个 部 分 , 即 文件 头 和 文件 体 。 在 文件 头 里 ,主要 是 对 这 个 
HTML 文件 进行 一 些 必要 的 定义 ,文件 体 中 的 内 容 才 是 真正 要 显示 的 各 种 文件 信息 。 在 一 
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Chtml> “ 
<head> 
《title> 这 是 第 一 个 HTML 页 </title> 
</head> 
Cbody> 另 B 为 
</body> 国 ， 库 ， 文 后 ， Be EZ 站 
Chtml> ja ”3f 夫 Es» © 
文 tm 了 = 
人 排 R 方 式 文件 志 
EE 名称 CS] es EE 
时 国 casyMulel0 2014/2110 17:29 。 文件 才 
国 gamebox 2014/3/13 14:50 。 文件 去 
天 二 可 gamebox_plat 2014/3/13 14:50 。 文件 志 
库 入 wy eBooks 2015/7/26 1807 。 文件 志 
园 视 灰 县 pprv 2015/3/26 18:28 。 文件 赤 
GE WB TEMPp 2015/116 1025 。 文件 夫 
旧闻 Tencent 2015/3/22 18:04 ”文件 夹 器 
-一 ~ ’ 
MEN): (frst "| 
| 
@ ax snnma Leo |][ ws | 


图 11-1 用 记事 本 制作 网 页 


个 HTML 文件 中 包含 各 种 HTML 元 素 , 如 图 片 .表格 、 表 单 等 ,这 些 元 素 在 页 面 中 使 用 标 
记分 隔 , 可 以 说 HTML 文件 是 由 各 种 HTML 元 素 和 标记 组 成 的 。 下 面 是 HTML 基本 
结构 : 

< html > 

<head> 

<title> </title> 

</head> 

<body> 

</body> 

</html> 

在 HTML 文档 中 ,第 一 个 标签 是 二 html> ,这 个 标签 告诉 浏览 器 这 是 HTML 文档 的 
开始 。HTML 文档 的 最 后 一 个 标签 是 二 /html ,这 个 标签 告诉 浏览 器 这 是 HTML 文档 的 
终止 。 在 二 head 记 和 二 /head 二 标签 之 间 的 文本 是 头 信息 ,在 浏览 器 窗口 中 , 头 信息 是 不 被 
显示 的 。 二 title> 和 三 /title 二 标签 之 间 的 文本 是 文档 标题 ,它们 被 显示 在 浏览 器 窗口 的 标 
题 栏 中 。 在 二 body 二 和 二 /body 二 标签 之 间 的 文本 是 正文 ,会 被 显示 在 浏览 器 中 。 


11.1.3 HTML 的 基本 标记 
1. 文件 类 型 标记 


文件 类 型 标记 是 二 html 二 ,是 双 标 记 , 用 来 标记 该 文件 是 HTML 类 型 的 文件 ,位 于 
HTML 文件 的 最 外 层 , 也 就 是 说 这 一 对 标记 必须 放置 在 代码 的 开头 和 结尾 ,其 语法 如 下 : 
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<html> 
</html > 


HTML 标记 是 最 基本 的 标记 , 它 标志 着 这 段 代码 是 用 HTML 语言 来 描述 的 。 

2. HTML 头 标记 

HTML 的 头 标记 以 一 head 之 开始 .以 一 /head 结束 ,是 一 个 双 标 记 ,其 语法 如 下 : 
<head> 头 部 内 容 </head> 

它 用 于 包含 当前 文件 的 相关 信息 ,一 般 包括 标题 .基底 信息 、 元 信息 等 。 在 一 般 情 况 下 ， 


CSS 样式 也 是 定义 在 头 元 素 中 。 定 义 在 头 部 的 内 容 一 般 不 会 在 网 页 中 直接 显示 ,而 是 通过 
另外 的 方式 起 作用 。 表 11-1 所 示 为 在 头 部 常用 的 标记 。 


表 11-1 头 部 的 常用 标记 


标 记 描 述 
<base> 当前 文档 的 url 全 称 (基底 网 址 ) 
basefont> 设 定 基准 的 文字 字体 、 字 号 和 颜色 
<title> 设 定 显 示 在 浏览 器 左上 方 的 标题 内 容 
<isindex> 表明 该 文档 是 一 个 可 用 于 检索 的 网 关 脚 本 ,由 服务 器 自动 建立 
<meta> 有 关 文 档 本 身 的 原 信息 ,例如 用 于 查询 的 关键 词 . 用 于 获取 该 文档 的 有 效 期 等 
<style> 设 定 CSS 层 全 样式 表 的 内 容 
<link> 设 定 外 部 文件 的 链接 
=script> 设 定 页 面 脚本 程序 的 内 容 
3. HTML 主体 标记 


文件 类 型 标记 是 二 body 二 ,是 双 标 记 , 用 于 包含 当前 文件 的 页 面 内 容 , 也 就 是 说 在 该 标 


记 之 间 的 内 容 是 页 面 中 真正 要 显示 的 内 容 , 包 括 文字 、 图 片 、 表 格 等 。 


在 二 body 二 标记 中 可 以 包含 多 种 属性 ,用 于 设置 页 面 的 背景 字体 等 属性 。 其 语法 


< body bgcolor = "颜色 ”background = "图 片 名 ”bgproperties = "fixed" text = "颜色 ”link = "颜色 " 
vlink = "颜色 " alink = "链接 按钮 ”topmargin = 距离 leftmargin = 距离 > 
网 页 内 容 

</body > 

说 明 : 

bgcolor: 设置 背景 颜色 。 

background: 设置 背景 图 片 。 

bgproperties: 设置 背景 图 片 固定 不 变 。 

text: 设置 文本 颜色 。 

link: 默认 链接 。 

vlink: 当 鼠 标 按 下 时 的 链接 。 

alink: 当 鼠 标 松 开 后 的 链接 。 
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。 topmargin: 文本 距 顶 部 的 距离 。 
。 leftmargin: 文本 距 左 边 的 距离 。 


4. 页 面 标题 


页 面 标题 标记 是 一 个 特殊 的 标记 , 它 设 置 的 内 容 并 不 显示 在 页 面 中 ,而 是 显示 在 浏览 器 
的 标题 栏 中 ,用 来 说 明文 件 的 用 途 。 因 此 ,在 设置 此 标记 的 时 候 ,要 使 其 能 够 体现 整个 页 面 
的 主题 。 

在 HTML 文件 中 ,标题 信息 设置 在 页 面 的 头 部 分 ,也 就 是 位 于 二 head 二 二 /head> 标 
记 之 间 。 标 题 以 到 title 之 开始 ,以 二 /title 之 结束 ,是 一 个 双 标 记 , 其 语法 如 下 : 


<title> 标题 内 容 </title> 


说 明 : 在 HTTML 文件 中 ,页 面 的 标题 只 能 有 一 个 ,用 于 帮助 浏览 者 更 好 地 识别 页 面 。 
(11,2 文字 ,列表 与 图 片 


11.2.1 文字 


网 页 中 的 文字 是 一 个 网 页 最 基础 的 部 分 ,而 文字 格式 主要 指 用 一 些 HTML 元 素来 标 
记 文本 的 方式 ,用 来 更 改 文 字 的 大 小 .颜色 .字体 .加 粗 、 斜 体 等 。 


1. 文字 的 基础 格式 


在 HTML 中 ,一 font 过 元素 可 以 用 来 显示 文字 的 属性 ,包括 文字 的 颜色 .大 小 和 字体 
。 其 具体 语法 如 下 : 
< font color = "颜色 " face = "字体 名 称 "” size = "n"> 文 字 内 容 </font > 


说 明 : 
。 color: 定义 文字 的 颜色 ,可 以 是 颜色 的 英文 名 称 , 也 可 以 是 十 六 进 制 的 颜色 代码 。 
face: 定义 文字 的 字体 。 
size: 定义 文字 的 大 小 ,有 效 范围 是 1 一 7。 

2. 加 粗 和 斜体 

通常 ,在 进行 文字 处 理 时 都 会 对 比较 重要 的 内 容 使 用 加 粗 、 斜 体 来 引起 读者 注意 ,其 具 
体 语法 如 下 : 

<b> 加 粗 的 文字 </b> 

<i> 倾 斜 的 文字 </i> 


< strong > 加 粗 的 文字 </strong> 
<em> 倾 斜 的 文字 </em> 


说 明 : 从 运行 结果 看 ,一 b> 与 <strong 之 对 于 加 粗 的 文字 效果 没有 什么 区 别 ,而 二 i 一 
与 二 em 使 文字 倾斜 的 效果 也 没有 什么 区 别 。 
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3. 下 划 线 与 删除 线 


有 些 时 候 网 页 设计 者 希望 文字 等 带 有 下 划 线 表示 突出 显示 ,或 者 在 修改 文字 的 上 面 使 
用 删除 线 表 示 文 字 被 删除 ,其 具体 语法 如 下 : 

<u> 下 划 线 </u> 

< strike > 删除 线 </strike> 

< del > 删除 线 </del > 

< ins > 插入 线 </ins> 

说 明 : 其 中 二 u 二 与 二 strike 写 元素 在 HTML4.0 以 上 版 本 中 不 建议 使 用 。 

4. 上 标 与 下 标 


在 描述 一 些 复杂 的 表达 式 时 ,特别 是 一 些 数学 公式 时 ,经 常会 用 到 上 标 与 下 标 , 其 具体 
语法 如 下 : 


< sup > 上 标 文字 </sup> 
< sub > 下 标 文字 </sub> 


5. 等 宽 文字 

等 宽 字体 一 般 针 对 英文 字体 而 言 ,其 具体 语法 如 下 : 

<tt > 英文 文字 </tt > 

6. 闪烁 文字 

这 是 除了 粗 体 和 斜体 之 外 的 另 一 种 使 文字 突出 显示 的 方式 ,其 具体 语法 如 下 : 
<blink> 闪 烁 文字 </blink> 


说 明 : 需要 注意 的 是 该 元 素 在 IE 浏览 器 中 不 支持 ,其 他 如 Netscape、Opera、Firefox 等 
浏览 器 支持 。 


11.2.2 段落 
1. 段落 


在 HTML 中 ,使 用 二 p 二 元 素 区 分 一 个 与 男 一 个 段落 ,在 二 p 二 与 二 /p 二 标签 内 的 文字 
就 是 一 段 , 其 具体 语法 如 下 : 


<p> 一 段 文 字 </p> 

说 明 : 其 中 过 /p> 可 以 省 略 。 

2. 段落 居中 

要 想 居中 显示 网 页 中 的 段落 ,可 以 使 用 二 center 二 元 素 , 其 具体 语法 如 下 : 
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< center > 设置 元 素 的 居中 对 齐 </center > 
说 明 : 其 中 的 元 素 包括 文 字 、 图 像 .表格 等 。 
3. 预定 义 格式 


在 HTML 源 代码 中 ,即使 文字 已 经 换行 ,但 是 只 要 没有 使 用 二 br 二 标签 ,在 浏览 器 中 
显示 出 来 的 文字 就 不 会 被 换行 ; 如 果 想 要 在 浏览 器 中 显示 出 源 代码 里 所 设置 的 所 有 格式 ， 
如 空格 、 制 表 符 等 ,可 以 使 用 一 pre> 元 素 , 一 pre 之 元 素 相 当 于 设置 了 一 个 “ 块 ”, 这 个 块 可 以 
将 源 代码 里 的 所 有 文本 ( 除 HTML 标签 外 ) 在 浏览 器 中 按 原样 显示 出 来 。 其 具体 语法 
如 下 : 


<pre> 设 定 了 格式 的 文字 </pre> 

说 明 : 该 标记 是 将 其 中 的 所 有 文本 原样 显示 ,包括 文字 间 的 空白 ,如 空格 、 制 表 符 等 。 

4. 文本 缩 进 

去 blockquote> 主 要 用 于 设置 文本 的 缩 进 效果 ,通过 过 blockquote 一 元 素 可 以 实现 页 面 
文字 的 缩 进 ,从 而 使 页 面 的 文字 布局 更 加 错落 有 致 。 其 具体 语法 如 下 : 

<blockquote > 需要 进行 缩 进 的 文字 </blockquote > 

说 明 : 本 标记 可 以 谋 套 使 用 。 


去 br> 是 在 HTML 中 人 为 换行 的 元 素 ,一 次 只 能 换 一 行 , 其 具体 语法 如 下 : 
<br> 

说 明 : 该 标记 为 单 向 标记 ,标记 前 后 的 内 容 不 在 一 行 。 

6. 水 平分 隔 线 


当 页 面 内 容 比 较 烦 琐 时 ,可 以 在 段 与 段 之 间 插入 一 条 水 平 线 来 使 页 面 显得 层次 分 明 , 便 
于 阅读 。 插 入 水 平 线 的 具体 语法 如 下 : 

<hr align = "对 齐 方式 " width = "宽度 " size = "高 度 ”color = "颜色 " noshade > 

说 明 : 该 标记 为 单 向 标记 ,在 标记 位 置 行 成 一 水 平 线 。 

11.2.3 列表 


1. 无 序列 表 


无 序列 表 是 一 个 对 列表 项 目 出 现 次 序 不 做 要 求 的 列表 ,列表 项 目 之 间 是 并 列 关系 ,不 存 
在 先后 次 序 。 当 浏览 器 显示 无 序列 表 时 会 在 列表 项 目前 加 上 一 个 项 目 符号 ,而 不 是 显示 数 
字 ,该 符号 也 可 以 由 网 页 开发 人 员 指定 。 
其 具体 语法 如 下 : 
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<ul type = "符号 取 值 "> 
<1i> 无 序列 表 项 1 </1i> 


<1i> 无 序列 表 项 n</1i> 

</ul> 

说 明 : type 属性 可 以 取 3 个 值 , 即 *“disc”“square”“circle”( 在 某 些 浏览 器 中 ,type 属 
性 的 值 必须 使 用 小 写 浏览 器 才 可 以 识别 ) ,用 来 控制 强调 符 风 格 的 属性 ,3 个 值 分 别 对 应 实 
心 贺 点、 实心 方块 .空心 圆圈 。 需 要 说 明 的 是 有 些 浏览 器 不 支持 该 属性 。 


2. 有 序列 表 


与 无 序列 表 相对 应 的 是 有 序列 表 , 有 序列 表 中 的 列表 项 目 通常 是 有 先后 次 序 的 ,并 且 不 
能 随意 更 换 这 些 次 序 。 当 浏览 器 显示 有 序列 表 时 会 在 列表 项 目前 加 上 一 个 编号 ,用 来 标识 
项 目 出 现 的 次 序 , 当 然 该 编号 也 可 以 由 网 页 开发 人 员 指 定 。 

其 具体 语法 如 下 : 


<ol type = "符号 取 值 " start = ""> 
<1i> 有 序列 表 项 1</1i> 


< > 有 序列 表 项 a</li > 

</ol> 

说 明 : 

。 type 属性 可 以 取 5 个 值 , 即 *1”、“a”“A”、“i”“I”, 用 来 控制 强调 符 风 格 的 属性 ,5 个 

值 分 别 对 应 数字 、 小 写字 母 、 大 写字 母 、 小 写 罗马 数字 、 大 写 罗马 数字 。 

。 start 属性 是 一 个 数字 ,表示 从 第 儿 个 数字 (字母 ) 开 始 计数 。 

3. 定义 列表 

定义 列表 也 称 为 字典 列表 , 它 是 一 种 包含 两 个 层次 的 列表 ,主要 用 于 进行 名 词 解释 或 名 
词 定义 ,名 词 是 第 一 层次 ,其 解释 或 定义 是 第 二 层次 。 另 外 ,这 种 列表 不 包括 项 目 符号 ,每 个 
列表 项 带 一 段 缩 进 的 定义 文字 。 其 语法 如 下 : 


<dl> 

<dt> 名 词 1</dt> 
<dd> 名 词 解 释 1</dd> 
<dt> 名 词 2</dt> 
<dd> 名 词 解释 2</dd> 


</dl> 


说 明 : 二 dl 二 标记 表示 一 个 定义 列表 的 开始 ; 二 /dl 二 表示 定义 列表 的 结束 ; 二 dt 二 表 
示 要 被 解释 的 名 词 ; 二 dd 二 表示 这 段 文字 是 对 前 面 名 词 的 解释 说 明 。 


11.2.4 图 片 
在 一 个 网 页 中 可 以 插入 Logo( 网 站 标志 )、Banner( 横 幅 广 告 ) 等 各 种 图 片 , 当 浏 览 者 浏 
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览 网 页 时 ,这 些 图 片 会 自动 显示 出 来 。 合理 地 应 用 图 片 可 以 使 网 页 看 起 来 更 生动 ,形式 更 活 
泌 。 在 HTML 中 可 以 通过 二 img 记 元 素 插 入 图 片 ,其 语法 代码 如 下 : 
< img src = "url" alt = "替代 文字 " name = "名 字 ” width = "宽度 ”height = "高 度 " border = "边框 " 
aligh = "对 齐 方式 " id= "编号 "> 
说 明 : 
。 src: 用 来 指定 图 片 的 位 置 ,可 以 是 相对 路 径 也 可 以 是 绝对 路 径 。 
alt: 指定 用 于 替代 图 片 的 文本 , 当 图 片 不 能 正常 显示 时 ,可 以 使 用 蔡 代 文本 来 蔡 代 
图 片 。 
name: 图 片 的 名 称 , 在 很 多 时 候 可 以 省 略 。 
width: 指定 图 片 的 宽度 。 
height: 指定 图 片 的 高 度 。 
border: 指定 图 片 的 边框 大 小 ,该 属性 的 值 越 大 ,边框 越 粗 。 
aligh: 用 于 设置 图 片 的 对 齐 方式 , 它 有 5 个 属性 , 即 left righ、 top、middle 和 
bottom, 分 别 表示 左 对 齐 、 右 对 齐 、 顶 部 对 齐 、 中 间 对 齐 和 底部 对 齐 。 
id: 图 片 的 编号 ,也 可 以 省 略 ,在 同一 个 HTML 文档 中 不 允许 出 现 相 同 的 id 号 ,但 
可 以 出 现 相同 的 name。 


11.2.5 网 页 背景 

1. 网 页 背景 颜色 

用 户 可 以 在 二 body 二 元 素 中 设置 背景 颜色 ,其 语法 如 下 : 

< body bgcolor = "背景 颜色 "> 网 页 内 容 </body> 

说 明 : 背景 颜色 和 文字 颜色 的 表示 方法 一 样 , 可 以 是 颜色 的 英文 名 称 , 也 可 以 是 十 六 
制 的 颜色 代码 。 

2. 网 页 背景 图 片 


页 背景 除了 可 以 用 颜色 之 外 ,还 可 以 用 图 像 , 同 样 是 在 二 body 二 元 素 中 设置 。 其 语 
法 如 下 : 
<body background = "背景 图 片 地 址 "> 网 页 内 容 </body > 


说 明 : 背景 图 片 可 以 是 本 地 文件 夹 内 的 ,也 可 以 是 网 络 中 的 图 片 ,如 果 是 网 络 中 的 图 
片 , 可 以 用 URL 地 址 指定 图 片 位 置 。 


(fs 超 链 接 


超 链接 是 网 站 中 最 重要 的 组 成 部 分 ,HTML 有 了 超 链 接 才 显得 与 众 不 同 。 超 链接 可 
以 方便 用 户 的 使 用 ,允许 浏览 者 从 一 个 网 页 跳 转 到 另 一 个 网 页 ,多 个 网 页 因为 有 了 超 链 
接 才 形成 一 个 网 站 。 超 链接 不 仅 可 以 链接 网 页 ,还 可 以 链接 图 片 、 视 频 、 音 频 ,甚至 是 任何 
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一 种 文件 。 


11.3.1 创建 超 链接 


在 实际 应 用 中 很 少 有 网 页 是 单独 的 ,通常 会 使 用 超 链接 创建 一 个 页 面 与 其 他 页 面 之 间 
的 联系 ,同样 也 可 以 使 用 超 链接 创建 与 其 他 Web 服务 器 上 的 网 页 联系 。 使 用 超 链接 不 仅 可 
以 链接 网 页 文件 ,还 可 以 链接 其 他 文件 。 


1. 超 链接 标记 


在 HTML 中 ,创建 超 链接 的 标记 是 二 a 之 。 过 a 过 标记 是 双 标 记 , 以 二 a 二 开始 ,以 
二/a> 结 束 。 志 a> 标 记 创建 的 链接 能 指向 一 个 HTML 页 面 、 一 幅 图 像 等 任何 资源 ,其 语法 
如 下 : 


<aname= " 锚 名 称 ”href = "URL" title = "标题 ”target = "目标 "> 超 链接 文字 </a> 


说 明 : 超 链接 元 素 的 属性 有 很 多 ,含义 如 下 。 

。 name: 用 于 设置 超 链接 当前 位 置 的 锚 名 称 。 
。 href: 用 于 设置 超 链接 的 链接 地 址 。 

。 title: 用 于 设置 超 链 接 的 标题 。 

。 target: 用 于 设置 打开 超 链接 的 目标 地 址 。 


2. 链接 地 址 


链接 地 址 用 于 设置 超 链 接 的 路 径 , 可 以 使 用 二 a 二 标记 中 的 href 属性 进行 设置 。 设 置 
链接 地 址 的 语法 如 下 : 


<a href = "链接 地 址 "> 用 来 设置 超 链接 的 元 素 </a> 


说 明 : 在 这 段 语 法 中 , 超 链接 的 链接 地 址 可 以 是 相对 地 址 ,也 可 以 是 绝对 地 址 。 

绝对 路 径 实际 上 就 是 完整 路 径 。 这 种 路 径 可 以 是 按照 硬盘 文件 的 真正 路 径 , 也 可 以 是 
按照 域名 的 完整 网 页 路 径 。 使 用 绝对 路 径 定位 链接 目标 文件 比较 清晰 ,但 是 如 果 该 文件 被 
移动 了 ,就 需要 重新 设置 所 有 的 相关 链接 。 

相对 路 径 顾名思义 就 是 自己 相对 于 目标 位 置 的 路 径 ,在 使 用 相对 路 径 的 时 候 , 不 论 将 这 
些 文件 放 到 哪里 ,只 要 它们 的 相对 关系 没有 变 , 就 不 会 出 错 。 一 般 有 以 下 3 种 相对 路 径 的 
写法 。 

。 同一 目录 下 的 文件 : 只 需要 输入 链接 文件 的 名 称 即 可 ,例如 “01. html”。 

。 上 一 级 目录 中 的 文件 : 在 目录 名 和 文件 夹 名 之 前 加 入 “../”, 例 如 *.. /05/01. html”。 

。 下 一 级 目录 : 输入 目录 名 和 文件 名 ,之 间 以 “/” 隔 开 , 例 如 “html/05/01. html”。 


3. 打开 链接 的 方式 


当 单 击 一 个 网 页 里 的 超 链接 时 ,通常 会 在 当前 窗口 中 打开 超 链接 目标 页 面 ,如 果 想 保留 
当前 网 页 的 内 容 , 让 链接 的 页 面 从 一 个 新 建 窗 口 里 打开 ,应 该 怎么 办 呢 ? 使 用 二 a 二 元 素 的 
target 属性 可 以 实现 这 个 功能 。target 属性 用 来 设置 打开 链接 的 方式 ,其 语法 如 下 : 


第 11 章 “HTML 


<a target = "目标 "> 超 链接 文字 </a> 


说 明 : 在 HTML 语言 中 , 超 链接 的 target 属性 可 以 取 4 个 值 ,这 些 值 的 具体 含义 如 
表 11-2 所 示 。 


表 11-2 target 属性 值 


属性 值 表示 的 含义 

_parent 在 上 一 级 窗口 打开 ( 常 在 框架 页 面 中 使 用 ) 
_blank 新 建 一 个 窗口 打开 

_self 在 同一 窗口 打开 ,默认 取 值 

-top 忽略 所 有 的 框架 结构 ,在 浏览 器 的 整个 窗口 打开 


11.3.2 锚 点 


在 超 链接 中 有 一 种 特殊 的 链接 形式 , 称 为 锚 点 链接 。 如 果 一 个 网 页 包含 的 内 容 很 多 ,要 
想 在 整个 网 页 里 快速 查找 到 自己 感 兴趣 的 内 容 , 就 不 会 那么 方便 了 ,这 时 可 以 通过 锚 点 帮助 
用 户 方便 地 到 达 当 前 网 页 的 其 他 位 置 。 


1. 创建 锚 点 


要 使 用 锚 点 引导 浏览 者 ,首先 要 创建 页 面 中 的 锚 点 。 创 建 的 锚 点 将 确定 链接 的 目标 位 
置 , 其 语法 如 下 : 

<aname= " 锚 点 名 称 "> 锚 点 的 链接 文字 </a> 

在 这 里 ,通过 锚 点 名 称 可 以 标注 相应 的 锚 点 ,该 属性 是 设置 锚 点 必需 的 , 锚 点 的 链接 文 
字 有 助 于 用 户 区 分 不 同 的 锚 点 。 在 实际 应 用 中 可 以 不 设置 链接 文字 ,这 是 因为 设置 的 锚 点 
仅仅 是 为 链接 提供 一 个 位 置 ,浏览 页 面 时 并 不 会 在 页 面 中 出 现 锚 点 的 标记 。 

2. 链接 到 本 页 的 锚 点 


如 果 要 链接 到 本 页 的 命名 锚 点 ,只 要 在 二 a 二 元 素 的 href 属性 中 指定 锚 点 名 称 ,并 在 该 
名 字 前 加 上 “# ”字符 。 链 接 到 本 页 锚 点 的 语法 如 下 : 


<a href ="# 锚 点 名 称 "> 锚 点 的 链接 文字 </a> 


3. 链接 到 其 他 网 页 的 锚 点 


通常 在 单 击 一 个 超 链接 时 都 会 打开 一 个 网 页 ,并 且 默 认 显示 该 网 页 的 顶端 ,而 不 会 是 网 
页 的 底部 或 网 页 的 其 他 位 置 。 如 果 要 打开 一 个 网 页 ,并 且 显 示 网 页 的 某 个 区 域 ,就 必须 创建 
锚 点 。 使 用 二 a 二 元 素 的 name 属性 可 以 在 网 页 上 设置 链接 到 其 他 网 页 的 锚 点 ,其 语法 
如 下 : 


<a href = "页 面 地 址 # 锚 点 名 称 "> 用 于 链接 锚 点 的 文字 </a> 
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11.3.3 图 像 的 超 链 接 


去 a> 标 记 不 仅 可 以 为 文字 设置 超 链接 ,还 可 以 为 图 片 设置 超 链接 。 为 图 片 设置 超 链 接 
有 两 种 方式 ,一 种 是 将 整个 图 片 设置 为 超 链接 ,只 要 单 击 该 图 片 , 就 可 以 跳 转 到 链接 的 URL 
上 ; 另 一 种 是 为 图 片 设置 热点 区 域 , 将 图 片 划分 为 多 个 区 域 , 单 击 图 片 的 不 同位 置 将 会 跳 转 
到 不 同 的 链接 上 。 


1. 将 整个 图 像 设 为 超 链接 


将 整个 图 像 设 为 超 链接 的 方法 很 简单 ,只 需要 将 二 a 二 标记 中 的 文字 换 成 <img 二 元 
素 , 在 <img 元 素 中 添加 需要 设置 为 超 链 接 的 图 片 即 可 。 其 语法 如 下 : 


<a href = "链接 地 址 ">< img src = " 源 文件 地 址 "></a> 
说 明 : 其 中 两 个 地 址 都 可 以 用 相对 路 径 也 可 以 用 绝对 路 径 。 
2. 设置 图 像 热点 区 域 


除了 可 以 为 整个 图 像 设置 超 链接 外 ,还 可 以 为 图 像 设置 热点 区 域 ,也 就 是 将 一 个 图 片 划 
分 成 多 个 可 单 击 的 区 域 , 单 击 不 同 的 区 域 将 跳 到 不 同 的 链接 上 。 在 定义 图 像 热点 区 域 的 时 
候 , 除 了 要 定义 图 像 热 点 区 域名 称 之 外 ,还 要 设置 其 热 区 范围 ,用 户 可 以 使 用 img 元 素 中 的 
usemap 属性 和 所 map 之 标签 来 创建 ,其 语法 如 下 : 

< img src = "url" usemap = "并 map 名 ">< map name = "map 名 ">< area shap = "图 像 热 区 形状 ”coords 

= " 热 区 坐标 " href = "链接 地 址 "> 

</map> 

说 明 : usemap 属性 值 中 的 “map 名 ?必须 是 二 map 二 标签 中 的 name 属性 值 ,因为 可 以 
为 不 同 的 图 片 创建 单 击 区域 , 每 个 图 片 都 会 对 应 一 个 二 map 二 标签 ,不 同 的 图 片 以 usemap 
的 属性 值 来 区 别 不 同 的 二 map 二 标签 。 需 要 注意 的 是 ，usemap 属性 值 中 的 “map 名 ”前 面 
必须 加 上 “#”。 

二 map 二 标签 里 至 少 要 包含 一 个 二 area 二 元素, 如 果 一 个 图 片上 有 多 个 可 单 击 区 域 ,将 
会 有 多 个 二 area 二 元 素 。 在 二 area 记 元 素 里 ,必须 指定 coords 属性 ,该 属性 值 是 一 组 用 逗号 
隔 开 的 数字 ,通过 这 些 数字 可 以 决定 可 单 击 区 域 的 位 置 ,但 是 coords 属性 值 的 具体 含义 取 
决 于 shape 的 属性 值 ,shape 属性 用 于 指定 可 单 击 区 域 的 形状 ,其 值 如 下 。 

。 circle: 指定 可 单 击 区 域 为 圆 形 ,此 时 coords 的 值 应 该 是 类 似 于 “x,y,z” 的 表示 方法 ， 
其 中 x 和 y 代表 圆心 的 坐标 ,该 坐标 是 相对 于 图 片 的 左上 角 而 言 的 ,也 就 是 说 图 片 
左上 角 的 坐标 是 *0,0”; 而 z 代表 贺 的 半径 长 度 ,单位 为 像素 ,circle 也 可 以 简写 为 
CIFC。 
polygon: 指定 可 单 击 区 域 为 多 边 形 ,此 时 coords 的 值 应 该 是 类 似 于 “xl,yl,x2,y2， 
x3,y3……” 的 表示 方法 ,其 中 xl 和 yl 是 多 边 形 的 一 个 顶点 的 坐标 ,x2 和 y2 是 多 
边 形 的 另 一 个 顶点 的 坐标 ,至 少 有 3 个 顶点 才能 形成 一 个 区 域 ( 三 角形 区 域 )。 同 样 
这 些 坐 标点 也 是 相对 于 图 片 左上 角 而 言 的 。 在 HTML 里 多 边 形 是 会 自动 闭合 的 ， 
所 以 在 coords 里 不 用 重复 第 一 个 坐标 来 闭合 整个 区 域 ,polygon 也 可 以 简写 成 poly。 
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。 rectangle: 指定 可 单 击 区 域 为 矩形 ,此 时 coords 的 值 应 该 是 类 似 于 “xl,yl,x2,y2” 
的 表示 方法 ,其 中 xl 和 yl 是 矩形 的 一 个 角 的 顶点 坐标 ,x2 和 y2 是 该 角 的 对 角 的 顶 
点 坐标 ,同样 这 些 坐 标点 也 是 相对 于 图 片 左上 角 而 言 的 ,rectangle 也 可 以 简写 成 rect。 


(1,4 表格 基础 


在 文档 处 理 中 ,表格 是 一 种 很 常用 的 表现 手法 。 在 HTML 中 表格 除了 用 来 对 齐 数 据 
之 外 ,更 多 地 用 来 进行 页 面 排版 ,无 论 是 普通 的 HTML 页 面 还 是 动态 网 站 都 需要 使 用 表格 
来 进行 页 面 的 布局 。 


11.4.1 创建 表格 


表格 的 开始 元 素 是 一 table> 结束 元 素 是 二 /table 之 ,所 有 的 表格 内 容 都 位 于 这 两 个 元 
素 之 间 。 如 果 要 创建 一 个 完整 的 表格 ,除了 包含 表格 元 素 外 ,还 要 有 行 元 素 二 tr 之 和 单元 格 
元 素 二 td 之 。 可 以 说 ,如 果 要 在 页 面 中 创建 一 个 完整 的 表格 ,至少 要 包含 这 3 个 元 素 。 创 建 
表格 的 具体 语法 如 下 : 

<table> 

过 并 

<td> 表 格 的 内 容 </td> 


</tr> 
</table > 


说 明 : 其 中 二 tr 二 表示 行 ,二 td 二 表示 列 , 上 述 代码 表示 在 一 行 中 有 一 列 。 

11.4.2 表格 的 属性 

在 默认 情况 下 ,表格 只 是 作为 布局 的 手段 ,因此 不 会 在 页 面 中 显示 出 来 ,但 有 时 候 将 表 
格 显 示 出 来 并 设置 一 定 的 效果 能 使 页 面 内 容 更 加 协调 。 

1. 表格 宽度 

在 默认 情况 下 ,表格 的 宽度 是 以 内 容 为 标准 的 ,如 果 要 设置 表格 的 宽度 为 某 一 特定 值 而 
与 其 中 的 内 容 无 关 时 , 则 可 以 使 用 width 属性 ,其 语法 如 下 : 


<table width = "表格 宽度 "> 

<tr> 

<td> 表 格 的 内 容 </td> 

</tr> 

</table> 

说 明 : 表格 宽度 可 以 是 表格 的 绝对 宽度 ,单位 是 像素 ; 也 可 以 设置 为 相对 宽度 , 即 相 对 
于 窗口 的 百分比 。 


2. 表格 高 度 


除了 可 以 为 表格 指定 宽度 之 外 ,还 可 以 为 表格 指定 高 度 。 通 常 ,表格 的 高 度 都 是 由 表格 
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的 行 数 及 单元 格 里 的 内 容 决定 的 ,在 为 表格 指明 高 度 之 后 ,如 果 表 格 的 行 数 与 单元 格 里 的 内 
容 使 表格 的 高 度 高 于 指定 的 高 度 , 则 浏览 器 将 以 实际 的 高 度 显 示 表 格 ; 如 果实 际 高 度 低 于 
指定 高 度 , 则 浏览 器 以 指定 高 度 显示 表格 。 所 table> 元 素 里 的 height 属性 值 可 以 用 来 指定 
表格 的 高 度 ,其 语法 如 下 : 

<table height = "表格 高 度 "> 

<tr> 

<td> 表 格 的 内 容 </td> 


</tr> 
</table> 


3. 表格 背景 图 片 


通过 一 table 二 元 素 中 的 background 属性 可 以 为 表格 指定 一 个 背景 图 片 ,这 种 方法 有 
点 类 似 于 为 网 页 指定 背景 图 片 。 如 果 背 景 图 片 小 于 表格 大 小 , 则 会 平 铺 该 背景 图 片 以 充满 整 
个 表 ; 如 果 背 景 图 片 大 于 表格 大 小 , 则 会 对 背景 图 片 进 行 裁剪 ,以 适应 该 表格 。 其 语法 如 下 : 
<table background = "图 像 源 文件 地 址 "> 


<tr> 

<td> 表 格 的 内 容 </td> 

</tr> 

</table> 

说 明 : background 的 属性 值 也 是 一 个 标准 的 URL 值 ,其 图 片 类 型 可 以 是 . gif、. png 
或 . jpeg 格式 。 


4. 单元 格 间距 


单元 格 间 距 指 表格 中 两 个 相 邻 单元 格 之 间 的 间距 和 单元 格 与 表格 边框 的 间距 。 在 默认 
情况 下 ,单元 格 与 单元 格 之 间 的 间距 是 两 个 像素 。 通 过 设置 二 table> 元 素 的 cellspacing 属 
性 可 以 增 大 或 减 小 单元 格 之 间 的 间距 。 其 语法 如 下 : 

<table cellspacing = "间距 大 小 "> 

<tr> 

<td> 表 格 的 内 容 </td> 


</tr> 
</table> 


5. 表格 内 单元 格 与 文字 的 距离 


表格 内 单元 格 与 文字 的 距离 指 在 单元 格 内 文字 与 单元 格 边 框 的 距离 ,在 默认 情况 下 , 文 
字 是 紧 贴 着 单元 格 的 边框 出 现 的 ,这 样 会 显得 页 面 的 内 容 有 些 拥 挤 , 可 以 通过 二 table 二 元 
素 中 的 cellpadding 属性 来 调整 这 一 距离 。 其 语法 如 下 : 


<table cellpadding = "单元 格 与 文字 距离 的 值 "> 
<tr> 

<td> 表 格 的 内 容 </td> 

</tr> 

<table> 
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说 明 : 文字 与 单元 格 的 距离 是 以 像素 为 单位 的 ,默认 设置 为 0 像素 。 
6. 表格 边框 宽度 


在 HTML 中 ,默认 表格 的 边框 宽度 为 零 , 即 不 显示 表格 的 边框 。 如 果 要 显示 表格 的 边 
框 ,必须 为 表格 指定 边框 宽度 。 在 HTML 中 可 以 使 用 二 table 二 元 素 的 border 属性 来 设置 
表格 边框 的 宽度 。 其 语法 如 下 : 

<table border = "表格 的 边框 宽度 "> 


<tr> 
<td> 表 格 的 内 容 </td> 
</tr> 

</table> 


7. 表格 边框 颜色 


在 默认 情况 下 ,边框 的 颜色 是 灰色 的 ,如 果 整 个 页 面 设置 了 特定 的 颜色 ,那么 为 了 使 表 
格 和 整个 页 面 的 色调 协调 一 致 ,应 该 为 表格 的 边框 设置 一 个 搭配 的 颜色 ,可 以 使 用 二 table 二 元 
素 的 bordercolor 属性 来 设置 表格 边框 的 颜色 。 其 语法 如 下 : 

<table border = "表格 的 边框 宽度 ”bordercolor = "边框 颜色 "> 

<tr> 

<td> 表 格 的 内 容 </td> 

</tr> 

</table> 

说 明 : 边框 颜色 可 以 是 颜色 的 英文 名 称 ,也 可 以 是 十 六 进 制 的 颜色 代码 。 需 要 注意 的 
是 ,要 想 为 边框 设置 颜色 ,首先 必须 为 边框 设置 宽度 ,否则 看 不 到 效果 。 


8. 表格 亮 边框 颜色 


在 HTML 中 ,除了 可 以 设置 表格 的 边框 颜色 外 ,还 可 以 将 边框 划分 为 亮 边框 和 暗 边 
框 。 亮 边框 就 是 光线 照 到 的 边框 ,一般 认为 表格 外 部 的 上 边框 和 左边 框 以 及 内 部 的 下 侧 和 
右 侧 边框 为 亮 边 框 , 可 以 通过 一 table 二 元 素 的 bordercolorlight 来 设置 表格 亮 边 框 。 其 语法 
如 下 : 


<table border = "表格 的 边框 宽度 ”bordercolorlight =" 亮 边框 的 颜色 "> 
<tr> 

<td> 表 格 的 内 容 </td> 

</tr> 

</table> 


说 明 : 在 定义 亮 边框 颜色 的 时 候 可 以 使 用 英文 颜色 名 称 , 也 可 以 使 用 十 六 进 制 颜色 值 。 
9. 表格 暗 边框 颜色 


与 表格 的 亮 边 框 相对 应 的 就 是 暗 边框 ,一 般 认为 是 表格 外 部 的 下 边框 和 右边 框 , 可 以 通 
二 table 记 元 素 的 bordercolordark 来 设置 表格 瞳 边框 ,其 语法 如 下 : 
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<table border = "表格 的 边框 宽度 ”bordercolor dark = "上 暗 边 框 的 颜色 "> 
E> 

<td> 表 格 的 内 容 </td> 

</tr> 

</table> 


说 明 : 在 定义 暗 边框 颜色 的 时 候 可 以 使 用 英文 颜色 名 称 ,也 可 以 使 用 十 六 进 制 颜色 值 。 
11.4.3 表格 行 的 对 齐 方式 


表格 都 是 由 行 组 成 的 , 行 也 可 以 设置 对 齐 方式 ,通过 对 行 的 对 齐 方式 进行 设 定 ,可 以 使 
表格 更 加 整齐 。 表 格 行 的 对 齐 方式 包括 水 平 对 齐 方式 和 垂直 对 齐 方式 。 


1. 垂直 对 齐 方式 


valign 属性 可 以 设置 行 的 垂直 对 齐 方式 ,就 是 使 行 里 面 的 内 容 都 垂直 对 齐 , 其 中 默认 为 
垂直 居中 对 齐 。 垂 直 对 齐 方式 的 语法 结构 如 下 : 


<table> 

<tr valign = ""> 
<td> 表 格 的 内 容 </td> 
</tr> 

</table> 


说 明 : valign 属性 有 3 个 值 , 即 middle、top、bottom, 分 别 表示 居中 对 齐 、 居 上 对 齐 、 居 
下 对 齐 。 

这 3 个 属性 值 除了 可 以 写 在 过 tr 之 标签 里 面 以 外 ,还 可 以 写 在 过 td 之 标签 里 面 。 写 在 
二 td 二 标签 里 面 用 来 控制 每 列 内 容 的 垂直 对 齐 方式 ,其 用 法 和 写 在 二 tr 二 标签 里 面 一 样 。 


2. 水 平 对 齐 方式 
align 属性 可 以 设置 行 的 水 平 对 齐 , 就 是 使 行 里 面 的 内 容 都 水 平 对 齐 , 默 认为 水 平 居 左 
对 齐 。 水 平 对 齐 方式 的 语法 结构 如 下 : 


<table> 

<tr align = ""> 
<td> 表 格 的 内 容 </td> 
</tr> 

</table> 


说 明 : align 属性 共有 3 个 值 , 即 center、\right \left, 分 别 表示 居中 对 齐 、 居 右 对 齐 、 居 左 
对 齐 。 


11.4.4 行 和 列 的 合并 


在 一 个 表格 里 ,有 时 候 用 户 想 编辑 的 表格 中 并 不 一 定 每 行 每 列 的 行 数 和 列 数 都 是 一 样 
的 ,这 时 候 就 需要 进行 行 和 列 的 合并 。 
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1. 列 的 合并 


colspan 属性 可 以 进行 列 的 合并 ,就 是 把 行 中 的 某 个 单元 格 与 其 后 的 一 个 或 多 个 单元 格 
合并 ,其 语法 结构 如 下 : 
<table> 


十 


<td colspan = 所 跨 的 列 数 > 表格 的 内 容 </td> 
</tr> 
</table> 


说 明 : 设置 的 是 单元 格 所 跨 的 列 数 而 不 是 像素 数 。 

2. 行 的 合并 

rowspan 属性 可 以 进行 行 的 合并 ,就 是 把 单元 格 与 其 下 的 一 个 或 几 个 单元 格 进行 合并 ， 
其 语法 结构 如 下 : 


<table> 

<tr> 

<td rowspan = 所 跨 的 行 数 > 表格 的 内 容 </td> 
</tr> 

</table> 


说 明 ; 在 这 里 设置 的 是 单元 格 所 跨 的 行 数 。 

11.4.5 表格 的 结构 

表格 结构 标记 可 以 明确 表格 的 结构 ,分 出 表格 的 头 ( 表 首 ) 身体 ( 表 主体 ) 和 尾 ( 表 尾 )， 
通过 设置 这 些 结构 标记 还 可 以 分 别 对 表 首 、 表 主体 以 及 表 尾 的 样式 进行 设置 。 

1. 表 头 

通常 ,一 个 表格 的 第 1 行 都 是 用 于 说 明 本 列 数据 含义 的 表 头 行 ,标签 一 thead 二 用 于 显 


示 表 格 的 表 头 内 容 , 表 头 标签 二 thead 二 的 使 用 可 以 让 网 页 中 过 长 的 表格 在 打印 时 每 页 的 最 
前 面 都 显示 出 表 头 标签 二 thead 二 的 内 容 。 表 头 语法 如 下 : 

<thead> 

<tr> 

<td> 单 元 格 内 的 文字 </td> 

</tr> 

</thead > 


2. 主体 


表格 的 主体 就 是 表格 真正 要 表达 的 内 容 和 数据 ,一 般 占用 表格 的 大 部 分 内 容 , 通 过 表 主 
体 标 记 生 tbody 之 可 以 更 好 地 划分 表格 的 结构 。 表 格 主体 部 分 的 设置 语法 如 下 : 


<tbooy> 
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<tr> 


<td> 单 元 格 内 的 文字 </td> 
</tr> 
</tbooy > 


3. 表 尾 


表格 的 表 尾 主要 用 于 标注 表格 的 一 些 额 外 信息 ,例如 内 容 的 设计 者 、 创 建 日 期 \ 总 和 等 。 
在 HTML 中 ,表格 的 表 尾 标记 是 二 tfoot> ,可 以 让 网 页 中 过 长 的 表格 在 打印 时 每 页 的 最 后 
面 都 显示 出 表 尾 标签 二 tfoot 过 的 内 容 。 其 语法 如 下 : 

<tfoot> 

<tr> 

<td> 单 元 格 内 的 文字 </td> 


</tr> 
</tfoot> 


11.4.6 表格 的 标题 


表格 经 常 包括 标题 部 分 ,在 HTML 4.01 中 专门 有 一 个 过 caption 过 元 素 用 来 设置 表格 
的 标题 ,不 过 由 于 表格 的 标题 部 分 看 上 去 与 表格 似乎 是 分 离 的 两 个 部 分 ,所 以 很 多 网 页 开发 
者 都 没有 使 用 该 元 素 的 习惯 ,而 是 直接 使 用 文本 元 素来 设置 表格 标题 。 在 默认 情况 下 ,表格 
的 标题 都 显示 在 表格 的 上 方 , 并 且 是 居中 显示 。 通 常 ,二 caption 过 元素 都 是 紧 跟 在 一 table 二 之 
后 的 ,但 是 它 可 以 出 现在 过 table> 元 素 与 二 tr 元 素 之 间 的 任何 位 置 ,其 语法 如 下 : 


< caption > 表格 的 标题 文字 </caption> 


11.4.7 表格 的 垦 套 


在 实际 应 用 中 ,表格 并 不 是 单一 出 现 的 ,往往 需要 在 表格 内 嵌 套 其 他 的 表格 来 实现 页 面 
的 整体 布局 ,一 般 情 况 下 需要 使 用 一 些 可 视 化 软件 来 实现 布局 ,这 样 看 起 来 比较 直观 ,容易 
达到 预期 的 目的 ,当然 也 可 以 通过 直接 输入 代码 实现 。 


(fn 框架 基础 


框架 是 一 种 划分 浏览 器 窗口 的 特殊 方式 ,通过 使 用 框架 可 以 将 多 个 网 页 组 合成 一 个 页 
面 显示 在 浏览 器 中 。 浏 览 器 的 各 个 页 面 之 间 相互 独立 , 却 又 相互 关联 。 用 户 在 浏览 这 种 页 
面 的 时 候 , 当 对 其 中 某 一 个 部 分 进行 操作 ,如 浏览 下载 的 时 候 , 其 他 页 面 保持 不 变 ,这 样 的 
页 面 被 称 为 框架 结构 的 页 面 ,也 称 为 多 窗口 页 面 。 


11.5.1 创建 框架 


实际 上 ,框架 对 象 本 身 也 是 一 类 窗口 , 它 继承 了 窗口 对 象 的 所 有 特征 ,并 拥有 所 有 的 属 
性 和 方法 。 使 用 框架 最 主要 的 目的 就 是 创建 链接 的 结构 ,最 常见 的 框架 结构 就 是 将 网 站 的 
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导航 条 作为 一 个 单独 的 框架 窗口 。 框 架 主要 包含 两 个 部 分 , 即 框架 集 和 具体 的 框架 文件 。 
框架 集 一 frameset 二 用 来 定义 一 个 HTML 文件 为 框架 模式 ,并 设 定 视 窗 如 何 分 割 。 其 实 框 
架 集 就 是 存放 框架 结构 的 文件 ,也 是 访问 框架 文件 的 入 口 文件 ,其 基本 语法 如 下 : 

< frameset > 


< frame src=""> 
< frame src=""> 


</frameset > 


说 明 : 其 中 每 个 二 frame 二 标记 中 都 会 定义 一 个 框架 页 面 ,也 就 是 使 用 src 属性 定义 一 
个 真正 显示 内 容 的 页 面 地 址 。 在 一 个 框架 集 文件 内 定义 了 几 个 二 frame 二 标记 ,就 表示 它 将 
页 面 划分 了 几 个 窗口 。 


11.5.2 分 割 窗口 


框架 结构 最 大 的 特点 就 是 将 一 个 单独 的 窗口 分 割 成 多 个 窗口 ,窗口 的 分 割 方式 需要 在 
框架 集 页 面 中 设置 。 框 架 集 是 框架 结构 的 基础 ,只 有 通过 框架 集 , 各 个 框架 窗口 才能 结合 起 
来 组 成 一 个 真正 的 网 页 文件 。 因 此 ,对 于 框架 集 的 属性 设置 也 是 使 用 框架 最 基础 的 操作 ,而 
分 割 窗 口 则 是 基础 中 的 基础 。 


1. 上 下 分 割 


既然 是 框架 结构 的 页 面 ,就 要 包含 多 个 框架 窗口 ,设置 框架 窗口 的 排列 方式 是 必 不 可 少 
的 工作 。 上 下 分 割 窗口 就 是 在 窗口 的 水 平方 向 上 划分 出 几 条 分 割 线 , 将 页 面 分 成 由 上 到 下 
几 个 窗口 ,需要 使 用 rows 属性 ,其 语法 如 下 : 

< frameset rows = "各 个 窗口 的 高 度 "> 


<frame src=" "> 
> 


<frame src = 


ds 

说 明 : 其 中 ,rows 属性 定义 的 是 各 个 窗口 的 高 度 值 ,这 些 值 可 以 是 绝对 的 像素 值 ,也 可 
以 是 相对 于 整个 页 面 的 百分比 ,各 窗口 高 度 值 之 间 使 用 逗号 分 隔 开 。 

2. 左右 分 割 


左右 分 割 窗口 就 是 在 浏览 器 中 沿 垂直 方向 分 割 为 儿 个 窗口 ,这些 窗 口 左右 分 布 , 其 设置 
属性 是 cols, 使 用 的 语法 如 下 : 


<frameset cols = "各 个 窗口 的 宽度 "> 
< frame src=""> 
< frame src=""> 


</frameset > 


说 明 : cols 也 可 以 取 多 个 值 ,每 个 值 表示 一 个 框架 窗口 的 水 平 宽度 , 它 的 单位 可 以 是 像 
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素 ,也 可 以 是 占 浏 览 器 的 百分比 。 与 垂直 分 割 窗口 相同 ,一 般 设 定 了 几 个 cols 的 值 就 需要 
有 几 个 框架 窗口 。 


3. 窗口 的 谋 套 


除了 可 以 对 窗口 进行 上 下 分 割 和 左右 分 割 外 ,还 可 以 混合 利用 这 两 种 模式 ,这 就 是 窗口 
的 嵌 套 。 符 套 分 割 窗口 就 是 在 框架 集中 赃 套 框架 集 , 在 一 个 浏览 器 页 面 内 既 有 上 下 分 割 的 
窗口 ,又 有 左右 分 割 的 窗口 。 窗 口 藤 套 的 语法 如 下 : 

< frameset > 

<frame src=" "/> 

< frameset > 

< frame src =" "/> 

< frame src =" "/> 

</frameset > 

</frameset > 


说 明 : 框架 集 里 起 码 要 有 一 个 框架 页 面 伐 套 多 个 框架 集 ,在 被 嵌 套 的 框架 集中 最 少 要 
有 两 个 子 框 架 页 面 ,否则 骨 套 就 没有 意义 了 。 

11.5.3 设置 框架 边框 

1. 设置 框架 边框 显示 或 隐藏 

在 默认 情况 下 ,框架 的 边框 是 显示 出 来 的 ,有 时 候 , 用 户 希望 隐藏 框架 结构 中 的 框架 分 
割 线 , 这 时 可 以 通过 设置 frameborder 实现 。 设 置 框架 边框 的 语法 如 下 : 


<frameset frameborder = "框架 显示 属性 值 "> 
< frame src=""> 


< frame src=""> 


</frameset > 


说 明 : 在 这 里 框架 的 显示 属性 值 只 能 取 0 或 1, 取 0 表示 不 显示 边框 , 取 1 表示 显示 边 
框 ,默认 效果 是 取 值 为 1 的 效果 。 


2. 设置 框架 边框 宽度 


不 同 浏览 器 中 对 框架 边框 的 宽度 显示 不 一 致 ,在 HTML 4. 01 中 也 没有 规定 用 于 设置 
框架 边框 宽度 的 属性 ,但 是 很 多 浏览 器 都 支持 在 二 frameset 二 标签 里 使 用 border 属性 来 设 
置 边框 宽度 。 设 置 框架 边框 宽度 的 语法 如 下 : 

< frameset border = "框架 边框 宽度 "> 

< frame src=" We 


<frame src=" "> 
</frameset > 


说 明 : 边框 宽度 的 值 以 像素 为 单位 。 
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3. 设置 框架 边框 颜色 


在 默认 情况 下 ,框架 的 边框 是 灰色 的 ,可 以 使 用 bordercolor 属性 将 其 设置 为 其 他 颜色 ， 
但 bordercolor 属性 主要 在 border 属性 存在 的 时 候 才 可 以 产生 效果 。 其 语法 如 下 : 


<frameset bordercolor = "颜色 值 "> 


<frame src=" "> 


<frame src=" "> 
</frameset > 


说 明 : 颜色 值 可 以 是 颜色 的 英文 单词 ,也 可 以 是 十 六 进 制 的 颜色 代码 。 

11.5.4 框架 的 属性 

1. 设置 框架 滚动 条 显示 

在 默认 情况 下 , 当 框 架 窗口 的 内 容 不 足以 在 分 制 的 区 域内 显示 时 会 出 现 滚动 条 ,以 方便 


用 户 查 看 。 滚 动 条 会 自动 在 各 个 无 法 完全 显示 的 框架 窗口 内 出 现 ,使 用 scrolling 属性 可 以 
分 别 对 各 个 框架 窗口 的 滚动 条 进行 设置 ,其 语法 如 下 : 


< frameset > 
<frame src="" scrolling = "属性 值 "> 
</frameset > 


说 明 : 在 这 里 scrolling 的 属性 值 可 以 取 值 为 yes、no 或 者 auto, 其 含义 如 表 11-3 所 示 。 
表 11-3 scrolling 的 属性 值 


属性 值 具体 含义 
yes 一 直 显示 滚 动 条 ,无 论 页 面 是 否 完全 显示 
no 从 来 不 显示 滚动 条 ,即使 内 容 无 法 完全 显示 出 来 
auto 根据 页 面 的 长 度 自动 调整 , 当 页 面 无 法 完全 显示 的 时 候 就 显示 滚动 条 。 该 属性 值 是 
HTML 框架 结构 页 面 的 默认 效果 
2. 固定 框架 


在 默认 情况 下 ,框架 窗口 的 大 小 是 可 以 由 用 户 自己 来 调整 的 ,不 过 有 些 时 候 网 页 开发 者 
不 希望 用 户 可 以 自己 调整 框架 窗口 大 小 而 影响 了 网 页 效果 。 在 HTML 4. 01 里 允许 通过 
frame 元 素 的 noresize 属性 来 禁止 浏览 用 户 调整 框架 窗口 大 小 。 固 定 框架 的 语法 如 下 : 


< frameset > 


< frame src=" 
</frameset > 


说 明 : noresize 属性 没有 属性 值 , 哪 个 框架 窗口 使 用 了 noresize 属性 ,该 框架 窗口 的 大 
小 则 不 能 由 用 户 调整 。 


3. 不 支持 框架 标记 


noresize> 


框架 结构 虽然 对 页 面 导航 很 有 效 , 但 是 有 些 浏 览 器 并 不 支持 框架 页 面 ,因此 框架 结构 的 
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网 页 有 时 候 无 法 正常 显示 ,这 就 影响 了 用 户 的 阅读 。 使 用 一 noframes 之 标记 可 以 使 这 些 浏 
览 器 能 够 读 取 标 记 内 的 内 容 , 而 对 于 支持 框架 结构 的 浏览 器 来 说 , 则 会 自动 忽略 其 中 的 内 
容 。 二 noframes 放 被 称 为 不 支持 框架 标记 ,其 使 用 的 语法 如 下 : 

<frame set> 


<frame src = "页面 源 文件 地 址 " noresize> 


<noframes> 


fs 

</frameset > 

说 明 : 在 这 里 ,放置 在 标记 过 noframes 之 和 过 /noframes 盖 之 间 的 内 容 就 是 在 不 支持 框 
架 的 浏览 器 中 所 显示 的 内 容 。 


11.5.5 在 框架 中 使 用 链接 

框架 的 链接 和 普通 链接 一 样 ,都 需要 使 用 二 a 二 标记 。 需 要 特别 指出 的 是 , 当 框 架 结构 
中 的 一 个 框架 作为 变换 页 面 时 需要 为 该 框架 窗口 命名 ,然后 根据 名 称 对 框架 进行 变换 ,这 就 
需要 使 用 name 标记 和 target 标记 。 其 中 ,name 标记 用 来 为 窗口 命名 ,而 target 标记 用 来 
引导 链接 页 面 在 框架 内 打开 。 这 个 操作 和 超 链接 中 的 目标 属性 是 非常 相似 的 。 

11.5.6 浮动 框架 

在 框架 结构 中 ,除了 固定 的 分 割 方式 之 外 ,还 有 一 种 框架 窗口 可 以 作为 一 个 页 面 元 素 添 
加 到 普通 页 面 中 ,这 样 框架 窗口 可 以 位 于 页 面 的 各 个 位 置 , 这 种 框架 结构 被 称 为 浮动 框架 。 
浮动 框架 带 有 许多 属性 ,通过 这 些 属 性 可 以 调整 框架 页 面 的 样式 以 及 它 在 页 面 中 的 布局 ,其 
属性 如 表 11-4 所 示 。 

表 11-4 浮动 框架 的 属性 


属 性 具体 含义 
src 浮动 框架 页 面 的 源 文件 地 址 
width 浮动 框架 在 页 面 中 显示 的 宽度 
height 浮动 框架 在 页 面 中 显示 的 高 度 
align 浮动 框架 页 面 在 浏览 器 中 的 对 齐 方 式 ,可 以 为 左 对 齐 、 右 对 齐 或 居中 对 齐 
name 设 定 框 架 页 面 的 名 称 
marginwidth 设置 框架 边缘 宽度 
marginheight 设置 框架 边缘 高 度 
scrolling 设 定 浮 动 框架 页 面 内 是 否 显示 滚动 条 
frameborder 设 定 浮动 框架 的 边框 
1. 插入 浮动 框架 


在 HTML 里 可 以 使 用 <<iframe 二 标签 创建 浮动 框架 。 一 iframe 记 标签 与 二 img 记 标签 
一 样 ,可 以 放 在 二 body 二 标签 之 内 的 任何 一 个 位 置 ,二 iframe 二 标签 里 的 src 属性 可 以 用 来 
指定 浮动 框架 载 人 的 文档 URL。 插 入 浮动 框架 语法 如 下 : 
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< iframe src= "页 面 源 文件 地 址 "> 


</iframe > 


2. 浮动 框架 大 小 


在 普通 框架 结构 中 ,由 于 框架 就 是 整个 浏览 器 窗口 ,因此 不 需要 设置 大 小 ,但 是 浮动 框 
架 是 插入 到 普通 HTML 页 面 中 的 一 个 元 素 , 可 以 使 用 width 和 height 属性 调整 大 小 ,其 语 
法 如 下 : 

< iframe src= "页面 源 文件 地 址 ”width = "窗口 宽度 值 ”height = "窗口 高 度 值 "> 

框架 内 容 

</iframe > 

说 明 : 在 这 里 ,width 属性 设置 的 是 框架 窗口 的 宽度 ,height 属性 设置 的 是 框架 窗口 的 
高 度 ,它们 的 单位 都 是 像素 。 

3. 浮动 框架 对 齐 方式 

对 于 浮动 框架 来 说 ,在 默认 情况 下 是 左 对 齐 的 ,如 果 不 想 让 浮动 框架 左 对 齐 , 可 以 使 用 
align 属性 对 框架 的 对 齐 方 式 进行 更 改 , 其 语法 如 下 : 

< iframe src="" align= "left/center/right"> 

框架 内 容 

</iframe > 

说 明 : 与 设置 其 他 页 面 元 素 的 对 齐 方式 类 似 , 浮 动 框 架 的 对 齐 方式 包括 left、center 和 
right, 分 别 表示 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 


4. 浮动 框架 页 面 的 链接 

除了 普通 的 框架 结构 外 ,浮动 框架 也 可 以 制作 页 面 之 间 的 链接 。 在 一 个 浮动 窗口 内 可 
以 链接 多 个 页 面 , 首 先 为 浮动 框架 窗口 定义 名 称 , 然 后 将 链接 文字 的 目标 页 面 打开 方式 设置 
为 定义 的 窗口 名 称 , 即 将 超 链接 的 target 属性 设置 为 浮动 窗口 的 名 称 , 这 样 , 当 运行 程序 的 
时 候 就 会 在 浮动 窗口 打开 链接 的 目标 页 面 了 。 


(i1,6 表单 基础 


大 家 在 现实 生活 中 需要 填 很 多 表 ,例如 入 学 申请 表 、 健 康 体检 表 等 ,如 果 把 这 些 表格 放 
在 网 上 ,就 是 HTML 中 的 表单 。 表 单 是 实现 动态 页 面 的 一 种 主要 的 外 在 形式 ,也 就 是 说 表 
单 是 进行 用 户 和 浏览 器 交互 的 重要 手段 。 


11.6.1 添加 表单 


表单 可 以 用 来 收集 用 户 在 客户 端 提 交 的 各 种 信息 ,例如 在 网 站 登录 或 注册 时 进行 的 键 
盘 和 鼠标 操作 都 是 通过 表单 作为 载体 传递 给 服务 器 的 。 表 单 其 实 是 页 面 中 的 一 个 特定 的 区 
域 , 由 二 form 过 标记 和 去 /form 盖 标记 定义 ,所 有 的 表单 元 素 都 要 在 这 对 标记 之 间 才 有 效 。 
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表单 的 基本 语法 如 下 : 


<form> 
设置 各 种 表单 元 素 
</form> 


1. 链接 跳 转 


action 属性 用 来 设置 链接 跳 转 ,也 就 是 在 提交 表单 内 容 的 时 候 按照 链接 地 址 跳 转 到 相 
应 的 页 面 进行 处 理 。 由 于 action 属性 用 来 控制 整个 表单 的 提交 内 容 , 所 以 action 属性 要 写 
在 过 form> 标 签 里 面 。 其 语法 结构 如 下 : 

< form action = "链接 跳 转 的 地 址 "> 

设置 各 种 表单 元 素 

</form> 

说 明 :链接 跳 转 的 地 址 除了 可 以 是 绝对 地 址 和 相对 地 址 外 ,还 可 以 是 一 些 其 他 的 地 址 
形式 ,如 表单 中 没有 任何 表单 元 素 ,那么 这 个 表单 传递 给 处 理 程 序 的 内 容 就 是 空 的 。 

如 果 省 略 action 属性 ,默认 为 提交 到 本 页 ,也 就 是 说 本 页 即 为 接收 并 处 理 表 单 的 程序 。 
可 以 接收 并 处 理 表单 的 程序 有 很 多 ,常用 的 有 ASP、ASPX、JSP、PHP 等 。 


2. 链接 跳 转 方式 


在 设置 了 链接 跳 转 action 以 后 ,还 需要 设置 当 链接 跳 转 时 所 使 用 的 跳 转 方法 ,可 以 通过 
method 属性 进行 设置 , 它 决 定 了 表单 中 已 收集 数据 是 用 什么 样 的 方法 发 送 到 服务 器 的 。 其 
语法 结构 如 下 : 

< form method = "表单 的 链接 跳 转 方法 "> 

表单 元 素 

</form> 


表单 的 链接 跳 转 方式 一 般 可 以 设置 为 get 和 post 两 种 ,其 具体 含义 如 表 11-5 所 示 。 
表 11-5 HTML 中 的 表单 链接 跳 转 方式 


传送 方法 具体 含义 注意 事项 


get 表单 数据 会 被 视 为 cgi 或 asp 的 参数 发 送 , 用 户 。 其 速度 较 快 ,但 数据 不 能 够 太 长 。 如 果 
输入 的 数据 会 附加 在 URL 之 后 ,由 用 户 端 直接 ”信息 超过 8192 个 字符 , 则 会 被 截 去 。 另 


发 送 至 服务 器 ,是 method 属性 的 默认 值 外 ,该 方法 不 具有 保密 性 
post ”表单 数据 与 URL 分 开 , 将 数据 写 在 表单 主体 内 ”没有 字符 长 度 的 限制 ,可 以 发 送 较 长 的 
发 送 信息 ,但 速度 相对 较 慢 
3. 表单 名 称 


表单 名 称 标 记 主 要 是 为 了 区 分 各 个 表单 ,因为 有 时 候 在 一 个 页 面 中 可 能 会 有 多 个 表单 ， 
或 者 在 一 个 表单 处 理 程 序 中 需要 处 理 多 个 页 面 的 表单 ,这 时 候 表单 名 称 就 显得 尤其 重要 了 。 
表单 名 称 的 标记 是 name, 其 语法 如 下 : 
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< form name = "表单 名 称 "> 
表单 元 素 
</form> 


说 明 : name 属性 的 写法 和 超 链 接 里 name 属性 的 写法 一 样 。 
11.6.2 输入 标签 


输入 标签 二 input 盖 是 使 用 最 广泛 的 表单 控件 元 素 , 用 于 定义 输入 域 的 开始 。 志 input 二 
标签 是 单 标签 ,所 以 在 使 用 时 要 为 二 input 二 标签 加 上 “/” 号 实现 标签 的 闭合 。 二 input 二 标 
签 必 须 嵌 套 在 表单 标记 中 使 用 。 其 语法 结构 如 下 : 

<form> 


< input type =" "/> 
</form> 


说 明 : type 属性 的 值 有 很 多 不 同 的 选择 对 应 不 同 的 输入 方式 。 

1. 文本 框 

文本 框 用 来 在 输入 框 中 输入 任何 类 型 的 数字 、 文 本 以 及 字母 等 ,输入 的 内 容 单行 显示 在 
页 面 中 ,可 以 通过 type 二 "text" 进 行 设置 。 其 语法 如 下 : 


<form> 
< input type = "text"> 
</form> 


2. 密码 框 

密码 框 是 用 来 输入 密码 的 ,可 以 通过 type 二 "password" 进 行 设置 。 在 设置 以 后 ,在 密 
码 框 中 输入 的 内 容 就 会 变 成 小 黑 点 或 者 是 “* ”号 ,可 以 用 来 保护 密码 不 被 第 三 者 看 见 。 其 
语法 结构 如 下 : 

< form> 


< input type = "password "> 
</form> 


3. 单 选 框 


单 选 框 指 只 能 选择 其 中 一 项 的 选项 框 ,就 像 很 多 表单 中 的 “性 别 ”选项 一 样 ,要 么 是 男 ， 
要 么 是 女 ,不 可 能 同时 是 男 又 是 女 。 因 此 ,可 以 将 性 别 这 一 单元 设置 成 单 选 框 , 让 用 户 选 择 ， 
选中 的 选项 会 以 圆 点 显示 。 单 选 框 可 以 通过 type 二 "radio" 进 行 设置 ,其 语法 如 下 : 

<form> 


< input type = "radio"> 
</form> 


4. 复 选 框 
复 选 框 与 单 选 框 类 似 ,可 以 是 一 个 单独 的 复 选 框 ,也 可 以 是 多 个 复 选 框 组 成 的 复 选 框 
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组 。 复 选 框 可 以 让 用 户 同 时 在 表单 中 选择 或 取消 多 个 选择 项 目 , 在 浏览 器 中 通常 表现 为 一 
个 小 方 框 , 当 用 户 选中 复 选 框 时 ,会 在 小 方 框 里 打 一 个 勾 , 如 果 用 户 没有 选中 该 选项 或 取消 
该 复 选 框 ,小 方 框 里 为 空 。 复 选 框 可 以 通过 type 二 "checkbox" 进 行 设置 ,其 语法 如 下 : 


<form> 
< input type = "checkbox”name = "名 称 "> 
</form> 


说 明 : 同一 组 复 选 框 ,name 属性 必须 相同 。 

5. 提交 按钮 

提交 按钮 是 把 表单 里 的 信息 提交 到 指定 的 数据 库 或 者 其 他 地 方 ,可 以 通过 type 二 "submit" 
进行 设置 ,其 语法 结构 如 下 : 


<form> 

< input type = " submit” name = "名 称 " value = ""> 

</form> 

说 明 : value 属性 里 填写 的 是 按钮 上 面 出 现 的 文字 ,以 表示 该 按钮 是 提交 按钮 ,可 以 是 
中 文 ,也 可 以 是 英文 。 


6. 重 置 按钮 
重 置 按 钮 的 作用 是 将 表单 中 的 用 户 输入 清除 ,将 内 容 恢复 到 初始 状态 。 重 置 按钮 可 以 
通过 type 二 "reset" 进 行 设置 ,其 语法 如 下 : 


<form> 
< input type = "reset” name = "名 称 " value =""> 
</form> 


说 明 : value 属性 里 填写 的 是 按钮 上 面 出 现 的 文字 ,以 显示 该 按钮 是 重 置 按钮 ,可 以 是 
中 文 , 也 可 以 是 英文 。 

7. 图 像 按钮 

图 像 按钮 是 指 将 页 面 中 的 按钮 使 用 图 片 显 示 外 观 ,这 样 的 图 片 可 以 具有 按钮 的 功能 ,而 
且 页 面 更 加 美观 。 图 像 按钮 可 以 通过 type 一” image" 设置 ,其 语法 如 下 : 

< form> 

< input type = " image" src = "图 像 源 文件 "> 

</form> 

说 明 : 由 于 在 这 里 需要 使 用 图 像 , 因 此 和 插入 图 像 一 样 ,需要 使 用 src 属性 正确 设置 图 
像 的 源 文件 地 址 。 

8. 文件 域 


文件 域 可 以 让 用 户 选择 存储 在 本 地 计算 机 上 的 文件 ,通常 用 于 在 文件 上 传 到 服务 器 时 
进行 文件 的 选择 。 文 件 域 在 浏览 器 里 的 显示 为 一 个 文本 框 与 一 个 按钮 ,通常 按钮 上 会 显示 
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“浏览 ?字样 。 这 两 个 组 件 是 同时 出 现在 网 页 中 的 , 当 单 击 【浏览 ] 按 钮 时 ,会 弹出 一 个 [选择 
文件 3] 对话 框 ,在 该 对 话 框 中 选择 文件 之 后 单 击 【打开 3】 按钮 ,就 会 在 文本 框 中 自动 输入 该 文 
件 在 本 地 的 绝对 路 径 。 文 件 域 可 以 通过 type 二 "file" 设 置 , 其 语法 如 下 : 

<form> 


< input type = "file" name = "名 称 "> 
</form> 


9. 隐藏 域 


在 前 面 章 节 中 介绍 的 表单 元 素 在 浏览 器 里 都 是 可 以 看 到 的 ,在 HTML 中 还 有 一 种 表 
单元 素 在 浏览 器 里 是 看 不 到 的 ,这 种 表单 元 素 称 为 隐藏 域 或 隐藏 框 ,隐藏 域 的 作用 是 在 表单 
里 放 入 一 个 不 希望 被 用 户 看 到 或 用 户 没 有 必要 看 到 的 内 容 , 而 这 些 内 容 往 往 是 在 提交 表单 
时 服务 器 或 脚本 需要 获取 的 内 容 。 隐 藏 域 可 以 通过 type 二 "hidden" 设 置 , 其 语法 如 下 : 

< form> 


< input type = "hidden"> 
</form> 


11.6.3 下 拉 列 表 


下 拉 列 表 是 一 个 下 拉 式 的 列表 或 者 带 有 滚动 条 的 列表 ,用 户 可 以 在 列表 中 选择 一 个 选 
项 。 创 建 下 拉 列 表 需 要 用 到 两 个 元 素 , 首 先 要 用 到 select 元 素 , 用 于 标记 下 拉 列 表 开始 , 然 
后 要 用 到 option 元 素 , 用 于 创建 下 拉 列 表 中 的 项 目 。 如 果 一 个 下 拉 列 表 中 有 多 个 可 选项 
目 , 只 需要 重复 使 用 option 元 素 。 下 拉 列 表 的 语法 如 下 : 

< select name = "名 称 "> 

< option value = " "> 选项 内 容 </option> 


< option value = " "> 选项 内 容 </option> 
< option value = " "> 选项 内 容 </option> 


</select > 


说 明 : 与 单 选 框 和 复 选 框 一 样 , select 元 素 也 需要 使 用 name 元 素 告 诉 服务 器 该 表单 的 
名 称 。 在 提交 表单 时 ,服务 器 通过 select 元 素 的 name 属性 值 获得 该 下 拉 列 表 框 里 的 选项 
值 ,而 select 元 素 的 选项 值 要 在 option 元 素 里 通过 value 属性 设置 。 


11.6.4 文本 域 


单行 文本 框 只 是 在 网 页 中 显示 一 个 只 能 输入 一 行文 字 的 文本 框 ,如 果 用 户 有 大 量 的 文字 ， 
尤其 是 分 段 的 多 行文 字 ,在 单行 文本 框 里 是 无 法 输入 的 。HTML 中 提供 了 一 个 一 textarea 二 元 
素 , 使 用 该 元 素 可 以 在 网 页 里 创建 一 个 文本 域 。 在 文本 域 里 可 以 显示 多 行文 字 , 也 可 以 输入 
多 行文 字 , 在 很 大 程度 上 方便 了 用 户 输入 和 查看 文字 。 文 本 域 的 语法 结构 如 下 : 

<textarea> 


输入 的 内 容 


</textarea> 
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(11.7 多 媒体 和 滚动 文字 
2 


在 现在 的 网 页 中 ,只 有 文字 和 图 片 是 完全 不 够 的 ,还 要 有 动画 、 声 音 等 的 加 入 ,这 样 
整个 页 面 才能 更 加 吸引 人 。 在 HTML 中 就 提供 了 插入 各 种 多 媒体 元 素 、 深 动 字幕 的 
功能 。 


11.7.1 多 媒体 元 素 
1. 插入 多 媒体 元 素 


在 HTML 中 添加 多 媒体 元 素 的 标记 是 二 embed> ,这 里 的 多 媒体 元 素 包 括 声音 和 动画 
两 种 。 

也 就 是 说 ,除了 可 以 设置 背景 音乐 之 外 ,还 可 以 为 页 面 添 加 声音 和 动画 文件 ,使 页 面 动 
感 十 足 。 在 页 面 中 添加 多 媒体 文件 同样 要 设置 源 文件 ,src 属性 是 必 不 可 少 的 。 另 外 ,由 于 
多 媒体 文件 在 播放 时 需要 一 定 的 空间 ,因此 要 为 其 设置 大 小 。 可 以 说 ,要 在 页 面 中 添加 多 媒 
体 元 素 , 仅 使 用 二 embed 二 标记 是 不 够 的 ,其 语法 如 下 : 

< embed src = " 源 文件 地 址 " width = "多 媒体 显示 的 宽度 ”height = "多 媒体 显示 的 高 度 "></embed> 

说 明 : 一 般 情况 下 ,不 在 标记 过 embed 之 和 二 /embed> 之 间 添 加 其 他 的 内 容 。 

2. 循环 播放 

在 默认 情况 下 ,多 媒体 文件 播放 一 次 以 后 就 会 自动 停止 。 如 果 希 望 该 文件 循环 播放 , 则 
需要 使 用 loop 属性 进行 设置 ,其 语法 如 下 : 


<embed src = " 源 文件 地 址 ”width = "多 媒体 显示 的 宽度 ” height = "多 媒体 显示 的 高 度 ” loop = 循环 
播放 ></embed > 


说 明 : 一 般 情况 下 ,在 设置 循环 播放 属性 的 时 候 , 需 要 将 autostart 设置 为 true。 
3. 自动 播放 


通过 二 embed 记 元 素 中 的 autostart 属性 可 以 设置 打开 网 页 时 背景 音乐 是 自动 播放 ,其 
语法 如 下 : 


< embed src = " 源 文件 地 址 ”width = "多 媒体 显示 的 宽度 ”height = "多 媒体 显示 的 高 度 ”autostart 
= 是否 自 动 播放 ></embed> 


说 明 : autostart 属性 可 以 取 值 为 true 和 false, 其 中 ,true 表示 自动 播放 ,而 false 表示 
需要 手动 播放 。 


4. 隐藏 多 媒体 元 素 


有 了 时候, 用 户 希 望 在 网 页 中 只 听 到 多 媒体 文件 的 播放 声音 ,而 看 不 见 多 媒体 文件 ,这 时 
可 以 使 用 二 embed 二 元 素 中 的 hidden 属性 来 隐藏 多 媒体 的 面板 ,这 样 在 播放 的 时 候 就 只 能 
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听 到 声音 ,而 看 不 到 画面 。 其 语法 如 下 : 


< embed src = " 源 文 件 地 址 " width= "多 媒体 显示 的 宽度 ”height = "多 媒体 显示 的 高 度 ” autostart = 
true hidden = 隐藏 值 > </embed> 


说 明 : hidden 的 值 可 以 取 true 或 false, 取 true 表示 隐藏 面板 ,反之 显示 面板 。 如 果 设 
置 了 hidden 的 值 为 true, 则 要 将 autostart 的 值 设置 为 true, 否 则 用 户 无 法 播放 多 媒体 ,也 就 
失去 了 添加 该 多 媒体 文件 的 意义 。 


11.7.2 插入 背景 音乐 


除了 可 以 添加 视频 外 ,还 可 以 通过 二 bgsound 二 元 素 为 网 页 添加 背景 音乐 。 和 图 像 标 
记 一 样 ,二 bgsound 记 元 素 的 源 文件 地 址 属性 src 是 必需 的 ,一 般 情况 下 ,背景 音乐 要 添加 在 
页 面 主体 的 开始 位 置 。 添 加 背景 音乐 的 语法 如 下 : 

< bgsound src = " 源 文件 地 址 "> 

说 明 : 作为 背景 音乐 的 可 以 是 MP3 音乐 文件 ,也 可 以 是 其 他 声音 文件 ,而 在 网 络 中 应 
用 最 广泛 的 是 MIDI 声音 文件 。 


11.7.3 滚动 字幕 

滚动 字幕 也 可 以 称 为 一 种 多 媒体 元 素 , 只 不 过 这 种 类 型 的 多 媒体 比较 简单 ,实现 的 效果 
比较 单一 ,在 一 些 时 尚 感 要 求 较 低 的 站 点 中 可 以 使 用 动态 文字 来 增加 页 面 的 动感 。 

1. 添加 滚动 字幕 

滚动 字幕 是 指 在 网 页 中 会 上 下 活动 或 左右 活动 的 字幕 ,可 以 是 文字 也 可 以 是 图 片 ,可 以 
通过 二 marquee 二 标记 来 设置 。 添 加 滚动 字幕 的 语法 如 下 : 

< marquee > 要 进行 滚动 的 文字 </marquee > 

说 明 : 标记 过 marquee 之 和 所 /marquee 二 之 间 的 文字 在 页 面 中 滚动 显示 ,默认 情况 下 是 
从 右 向 左 滚动 。 

2. 滚动 方向 

滚动 方向 是 指 文字 从 哪个 方向 开始 滚动 。 在 默认 情况 下 文字 是 从 右 向 左 滚动 的 ,使 用 
direction 属性 可 以 调整 文字 的 滚动 方向 。 设 置 文字 滚动 方向 的 语法 如 下 : 


< marquee direction = "left | right | up | down"> 
要 进行 滚动 的 文字 
</marquee > 


说 明 : direction 属性 有 4 个 值 , 即 left、right、up、down, 分 别 用 来 设置 字幕 从 右 向 左 深 
动 , 从 左 向 右 滚动 ,从 下 向 上 读 动 从 上 向 下 滚动 。 

3. 滚动 方式 

文字 的 滚动 方式 主要 包括 循环 滚动 ,来 回 滚动 以 及 只 滚动 一 次 就 停止 。 设 置 文字 的 滚 


214 


MV 


Web 前 端 开发 及 应 用 教程 


动 方式 需要 使 用 behavior 属性 ,其 语法 如 下 : 
< marquee behavior = "滚动 方式 "> 要 进行 滚动 的 文字 </marquee > 
在 这 里 ,滚动 方式 的 取 值 如 表 11-6 所 示 。 
表 11-6 滚动 方式 的 取 值 


滚动 方式 具体 含义 

scroll 循环 滚动 , 即 不 停 地 按照 设置 的 方向 滚动 

slide 只 滚动 一 次 就 停止 

alternate 交 蔡 滚动 , 即 按照 设置 的 方向 和 反方 向 来 回 滚动 。 例 如 设置 为 left, 则 先 向 左 滚动 , 滚 
动 到 页 面 左 端 后 再 向 右 滚动 


4. 滚动 字幕 的 背景 颜色 


在 页 面 中 为 了 突出 滚动 文字 ,可 以 使 用 二 marquee 过 元素 中 的 bgcolor 属性 为 其 添加 背 
景 颜色 。 其 语法 如 下 : 
<marquee bgcolor = "颜色 值 "> 要 进行 滚动 的 文字 </marquee> 


5. 滚动 速度 

在 HTML 中 ,可 以 通过 一 marquee 二 元 素 中 的 scrollamount 属性 调整 文字 的 滚动 速 
度 ,滚动 速度 也 可 以 看 成 滚动 距离 ,也 就 是 每 滚动 一 下 文字 向 前 移动 的 像素 数 。 其 设置 语法 
如 下 : 

< marquee scrollamount = "滚动 速度 "> 要 进行 滚动 的 文字 </marquee > 

说 明 : 滚动 速度 的 值 越 大 ,滚动 越 快 。 

6. 滚动 延迟 

滚动 延迟 是 指 在 每 一 次 滚动 之 间 设 置 一 定 的 时 间 间 隔 , 即 滚动 一 次 后 停止 一 段 时 间 再 
进行 下 一 次 滚动 。 设 置 滚动 延迟 的 语法 如 下 : 

<marquee scrolldelay= "延迟 时 间 "> 要 进行 滚动 的 文字 </marquee> 

说 明 : 延迟 时 间 的 单位 是 毫秒 , 即 设置 为 100 表示 延迟 0. 1s, 设 置 为 1000 表示 延迟 1s。 

7. 滚动 次 数 


除了 可 以 通过 behavior 设置 文字 的 滚动 方式 外 ,还 可 以 通过 loop 属性 设置 文字 具体 的 
滚动 循环 次 数 。 其 语法 如 下 : 

<marquee loop = "循环 次 数 "> 要 进行 滚动 的 文字 </marquee> 

说 明 : 在 这 里 loop 表示 循环 次 数 ,如 果 设 置 为 10, 则 表示 文字 在 屏幕 中 滚动 10 个 循环 
后 结束 滚动 。 
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8. 滚动 字幕 空白 空间 


滚动 字幕 空白 空间 是 指 在 滚动 文字 区 域 周围 的 空间 ,默认 情况 下 ,滚动 区 域 是 沿 着 
页 面 的 边缘 滚动 的 。 如 果 没 有 使 用 段落 标记 等 将 其 分 隔 , 它 和 页 面 中 的 其 他 元 素 是 紧 紧 
相连 的 。 通 过 hspace 属性 和 vspace 属性 可 以 设置 文字 区 域 的 水 平和 垂直 空间 ,其 语法 
如 下 : 

<marquee hspace = "水 平 空间 ”vspace = "垂直 空间 "> 要 进行 滚动 的 文字 </marquee > 

说 明 : 水 平 空间 和 垂直 空间 的 单位 都 是 像素 。 

9. 设置 鼠标 经 过 效果 

onmouseover 属性 用 来 控制 鼠标 滑 过 滚动 字幕 时 停止 滚动 的 效果 ,onmouseonut 属性 用 
来 控制 鼠标 移出 滚动 字幕 区 域 时 字幕 开始 滚动 的 效果 ,这 两 个 属性 必须 同时 定义 。 其 语法 
如 下 : 


<marquee onmouseout = "this. start()" 


= "this. stop()"> 要 进行 滚动 的 文字 </marquee > 

说 明 : onmouseout 二 "this. start ( )" 用 来 设置 鼠标 移出 该 区 域 时 继续 深 动 ， 
onmouseover 一 "this. stop() "用 来 设置 鼠标 移入 该 区 域 时 停止 滚动 。 这 两 个 属性 同时 使 用 ， 
才 可 以 使 鼠标 滑 过 滚动 字幕 时 停止 滚动 ,而 当 鼠 标 移 开 滚动 字幕 时 又 开始 滚动 。 


(11,8 综合 应 用 


11.8.1 蝴蝶 之 恋 


本 例 中 先 应 用 Photoshop 处 理 图 片 ,然后 应 用 HTML 中 的 文字 、 图 片 表 格 等 制作 一 
个 蝴蝶 之 恋 的 主页 。 

(1) HTML 网 页 文件 的 代码 如 下 : 

<! DOCTYPE html PUBLIC "”- //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 


xhtml1/DTD/xhtml1 - transitional. dtd"> 
< html xmlns = "http://www. w3. org/1999/xhtml"> 


< head > 
< meta http - equiv = "Content - Type" content = "text/htm]; charset = utf — 8"/> 
<title > 蝴蝶 之 恋 </title> 


< style type = "text/css"> 
.aa{ 
text ~ align: center; 
} 
body{ 
background — color: #93F; 
} 
a:link{ 
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color: #FFF; 

} 

.bb{ 
color: #900; 

} 

</style> 

</head> 


<body> 
< table width = "800" border = "0" align = "center" cellpadding = "0" cellspacing = "0"> 
站 久光 
<td class = "bb">< span class = "aa"> 
<marquee> 蝴蝶 之 恋 </marquee > 
</td> 
</tr> 
<tr> 
<td><hr/></td> 
</tr> 
<tr> 
<td>< table width = "200" border = "1" align = "center" cellspacing = "5"> 
<tr> 
<td>< img src= "1. jpg" width= "265" height = "240" /></td> 
<td>< img src= "2. jpg" width= "265" height = "240" /></td> 
</tr> 
<tr> 
<td>< img src="3. jpg" width= "265" height = "240" /></td> 
<td>< img src= "4. jpg" width= "265" height = "240" /></td> 
</tr> 
</table ></td> 
</tr> 
<tr> 
<td class = "aa">: : : : 请 你 单 击 上 面 的 图 片 进入 本 站 首页 : : 
BEST VIEW 800 * 600 </td> 
</tr> 
<tr> 
<td><hr /></td> 
</tr> 
<tr> 
<td class = "aa">| <a href ="# "> 本 站 首页 </a>|<a href = "shuijiaol. html"> 心情 小 筑 </a 
>|<a href = "shuijiao2. html"> 蝴蝶 之 恋 </a>|<a href = "#"> 蝴蝶 随笔 </a>|<a href ="#"> 关 
于 我 们 </a>|<a href = "#"> 和 我 联系 </a>|</td> 
</tr> 
</table> 
</center> 
</body> 
</html> 
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(2) 代码 在 浏览 器 中 运行 的 效果 如 图 11-2 所 示 。 


图 11-2 蝴蝶 之 恋 网 页 效果 


11.8.2 个 人 主页 


本 例 中 先 应 用 Photoshop 的 切片 工具 ,再 应 用 HTML 中 的 iframe 制作 一 个 个 人 主页 。 

(1) 启动 Photoshop CS6 ,打开 wangye. jpe 图 片 , 利 用 切片 工具 将 图 片 切割 ,然后 选择 
【文件 [存储 为 Web 所 用 格式 ] 命 令 , 将 文件 存 为 HTML 和 图 像 ,得 到 一 个 名 为 “11. 8. 1. html” 
的 文件 和 一 个 名 为 “img” 的 文件 夹 。 

(2) 启动 Dreaweaver CS6 ,打开 *11. 8. 1. html" 文 件 ,对 其 进行 相应 修改 ,代码 如 下 : 


<! DOCTYPE htm]l PUBLIC " - //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
< html xmlns = "http://www. w3. org/1999/xhtml"> 
<head > 
<title> 个 人 主页 </title> 
< meta http - equiv = "Content - Type" content = "text/html; charset = utf - 8"> 
</head> 
< body bgcolor = " # FFFFFF" leftmargin= "0" topmargin= "0" marginwidth= "0" marginheight = "0"> 
<! -- Save for Web Slices (wangye. jpg) -一 > 
<table id=" 01" width= "778" height = "654" border = "0" cellpadding = "0" cellspacing = "0"> 
<tr> 
<td colspan= "2"> 
< img src= "images/wangye 01.gif" width = "376" height = "158" alt = ""></td> 
<td rowspan= "3"> 
< img src = "images/wangye 02.gif" width = "402" height = "654" alt =""></td> 
</tr> 
<tr> 
<td rowspan= "2"> 
< img src = "images/wangye_03.gif" width= "66" height = "496" alt =""></td> 
< td background = "images/wangye 04.gif"> 
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< iframe src = "first. html" width= "100%" height = "270" name = "kuangjia" noresize 
marginwidth= "0" marginheight = "0" frameborder = "0" framespacing = "0" scrolling= "no" 
allowtransparency = "true" style= "filter: chroma(color = #ffa7da)"></iframe ></td> 
</tr> 
<tr> 
<td> 
< img src = "images/wangye 05.gif" width= "310" height = "204" alt =""></td> 
</tr> 
</table> 
<! -— End Save for Web Slices ——> 
</body> 
</html> 


(3) 框架 中 的 深 动 文字 是 一 个 单独 的 网 页 文件 ,文件 名 为 “first. html”, 其 代码 如 下 : 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 ~ transitional. dtd"> 
< html xmlns = "http://www. w3. org/1999/xhtml"> 
<head> 
<meta http - equiv = "Content — Type" content = "text/html; charset = gb2312" /> 
<title > 滚动 文字 </title> 
< style type = "text/css"> 
< == 
body { 
background - color:transparent; 
} 
.stylel { 
font — size: 12px; 
color: #333333; 
} 
.style2 {color: #333333} 
-—> 
</style> 
</head> 
<body> 
<span class = "style2"> 
< marquee direction = "up" scrollamount = "1" height = "290"> 
</span> 
<palign= "center" class = "stylel"> 
轻 轻 的 我 走 了 ,<br /> 
正如 我 轻 轻 的 来 ; <br /> 
我 轻 轻 的 招手 ,< br /> 
作 别 西天 的 云彩 。</p> 
<p align = "center" class = "stylel"> 
那 河畔 的 金 柳 , < br /> 
是 夕阳 中 的 新 娘 ; < br /> 
波光 里 的 艳 影 , < br /> 
在 我 的 心头 荡 澜 。</p> 
<palign= "center" class = "stylel"> 
软 泥 上 的 青 荐 ,< br /> 
油 油 的 在 水 底 招 氮 ; < br /> 
在 康 河 的 柔 波 里 , < br /> 
我 甘心 做 一 条 水 草 ! 
</p> 
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<p align = "center" class = "stylel"> 
那 榆 荫 下 的 一 漂 , < br /> 

不 是 清泉 , < br /> 

是 天 上 虹 ; <br /> 

揉 碎 在 浮 藻 间 , < br /> 
沉淀 着 彩虹 似 的 梦 。</p> 

<Pp align = "center" class = "stylel"> 
寻 梦 ? 撑 一 支 长 篇 , < br /> 

向 青草 更 青 处 漫 滴 ; < br /> 
满载 一 船 星 辉 , < br /> 

在 星 辉 斑 凋 里 放歌 。</p> 

<p align = "center" class = "stylel"> 
但 我 不 能 放歌 , < br /> 
悄悄 是 别离 的 笔 第 ; < br /> 

夏 虫 也 为 我 沉默 ,< br /> 
沉默 是 今 晚 的 康桥 ! </p> 

<p align = "center" class = "stylel"> 
悄悄 的 我 走 了 ,< br /> 
正如 我 悄悄 的 来 ; < br /> 

我 挥 一 挥 衣 袖 , < br /> 

不 带 走 一 片 云彩 。</p> 

</body> 

</html > 


(4) 代码 在 浏览 器 中 运行 的 效果 如 图 11-3 所 示 。 


凤 不 回头 ， 何 必 不 左 ， 始 然 
无 缘 ， 何 党 著 言 ， 今 日 种 种 
， 似 水 元 廊 ; 明日 何 少 ， 妖 


并 证 记 有 豆 记 但 忆 的 时 公 
但 是 我 们 星相 爱 的 啊 ”我 爱 你 呀 ! te 
我 相信 美丽 的 人 生 中 会 有 你 亏 


时 MN : i 


和 air a chot “ho 


二 让 人生 本 本 和 

希望 你 也 不 要 难过 t 了 
堂堂 正 正 的 站 起 来 

为 人 久富 有 六 


还 
es 
然 我 无 法 完全 了 


图 11-3 个 人 主页 效果 


CSS 与 DIV 


本 章 学 习 目 标 : 

名 了 解 CSS 基本 规则 。 

如 掌握 利用 CSS 美化 网 页 的 方法 。 
名 掌握 利用 CSS 布局 网 页 的 方法 。 


(12.1 CSS 基础 


qq 


CSS 是 Cascading Style Sheets( 层 释 样 式 表 ) 的 缩写 。 它 的 作用 是 定义 网 页 的 外 观 ( 例 
如 字体 .颜色 等 ) ,控制 网 页 的 布局 , 它 也 可 以 和 JavaScript 等 浏览 器 端 脚本 语言 结合 使 用 制 
作出 许多 动态 的 效果 。 


12.1.1 CSS 样式 表 的 设置 方法 

当 浏 览 器 读 取样 式 表 时 要 依照 文本 格式 来 读 ,这 里 介绍 4 种 在 页 面 中 插 和 样式 表 的 方 
法 , 即 内 联 样式 表 、 内 部 样式 表 、 外 部 样式 表 和 引用 多 个 样式 表 。 

1. 内 联 样式 表 


写 在 标签 内 的 样式 称 为 内 联 样式 ,在 标签 内 编写 的 样式 能 影响 的 范围 最 小 ,仅仅 影响 该 
标签 内 的 文字 , 另 一 个 标签 内 的 文字 将 无 法 显示 该 标签 所 定义 的 样式 。 设 置 内 联 样式 的 语 
法 如 下 : 

< 标签 名 style = "样式 属性 1: 属 性 值 1; 样式 属性 2: 属 性 值 2; .…"> 


说 明 : 内 联 样式 可 以 用 在 二 body 二 标签 内 的 所 有 子 标签 ,包括 二 body 二 在 内 ,但 不 能 用 
在 一 body 过 标签 之 外 的 标签 上 ,如 二 head>> `<title>、 一 html> 等 。 一 script 二 标签 虽然 也 
可 以 放 在 二 body 二 标签 内 ,但 不 能 使 用 样式 。 


2. 内 部 样式 表 


在 标签 内 设置 样式 可 以 影响 该 标签 内 的 文字 ,但 其 影响 范围 太 小 。 如 果 一 个 HTML 
文档 里 有 多 个 相同 样式 的 标签 ,使 用 内 联 样式 要 为 每 一 个 标签 都 设置 一 次 ,不 能 体现 出 CSS 
的 强大 功能 。 
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在 HTML 文件 里 使 用 二 style 二 标签 可 以 设置 影响 整个 文档 的 样式 ,这 种 方式 称 为 内 
部 样式 。 其 语法 如 下 : 


<style type = "text/css"> 

be 

选择 符 1{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;…} 
选择 符 2{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; …} 
选择 符 3{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; …} 


--> 
</style> 


说 明 : 二 style 二 标签 用 于 声明 样式 ,type 属性 声明 样式 元 素 是 以 CSS 的 语法 来 定 
义 的 。 


去 ! 一 ... 一 二 标签 用 于 隐藏 代码 , 当 某 些 浏览 器 不 支持 CSS 时 ,使 用 该 标签 可 以 让 浏览 
器 忽略 其 中 的 代码 ,避免 出 现 错误 。 
3. 外 部 样式 表 


外 部 链接 CSS 是 将 样式 表 以 单独 的 文件 存放 ,让 网 站 中 的 所 有 网 页 均 可 引用 此 样式 ， 
以 降低 维护 的 人 力 成 本 ,并 可 让 网 站 拥有 一 致 的 风格 。 这 种 设置 方式 是 把 样式 表单 独 保 存 
为 一 个 文件 ,然后 在 页 面 中 用 二 link 二 标记 链接 ,而 这 个 二 link 二 标记 必须 放 到 页 面 的 
二 head 二 区 域内 。 其 基本 语法 如 下 : 

< link rel = "stylesheet"” type = "text/css”href = "样式 表 源 文件 地 址 "> 


说 明 : href 属性 里 的 外 部 样式 文件 的 地 址 填写 方法 和 超 链接 的 链接 地 址 写法 一 样 。 
rel 一 "stylesheet "表示 告诉 浏览 器 连接 的 是 一 个 样式 表 文 件 , 是 固定 格式 。type 一 "text/css" 表 
示 传 输 的 文本 类 型 为 样式 表 类 型 文件 ,这 也 是 固定 格式 。 

一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 。 当 改变 这 个 样式 表 文 件 时 ,所 有 页 面 的 样 
式 都 随 之 改变 。 样 式 表 文件 可 以 用 任何 文本 编辑 器 (例如 记事 本 打开 并 编辑 ,一 般 样 式 表 
文件 的 扩展 名 为 . css, 其 内 容 是 定义 的 样式 ,不 包含 HTML 标记 。 


4. 使 用 @import 引用 外 部 样式 表 


与 一 link 过 标签 类 似 , 使 用 @import 也 能 引用 外 部 样式 ,不 过 @import 只 能 在 一 style 二 
标签 内 使 用 ,而 且 必 须 放 在 其 他 CSS 样式 之 前 。@import 的 语法 如 下 : 


@import url (外 部 样式 地 址 ); 


说 明 : url 为 关键 字 , 不 能 随便 更 改 ; 外 部 样式 地 址 指 的 是 外 部 样式 的 URL, 可 以 是 绝 
对 URL, 也 可 以 是 相对 URL。@import 除了 语法 和 所 在 位 置 与 过 link 二 标签 不 同 以 外 ,其 
他 的 使 用 方法 与 效果 都 是 一 样 的 。 

使 用 @import 引用 外 部 样式 ,在 该 语句 的 最 后 一 定 要 有 分 号 ,否则 引用 外 部 样式 将 会 
失败 。 
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12.1.2 选择 符 
CSS 最 大 的 作用 就 是 能 将 一 种 样式 加 载 到 多 个 标签 上 ,方便 开发 者 管理 与 更 改 。CSS 


通过 选择 符 实现 哪些 标签 元 素 使 用 样式 ,哪些 标签 元 素 不 使 用 样式 ,也 可 以 通过 选择 符 指定 
标签 元 素 使 用 哪个 样式 。 


1. 类 型 选择 符 

类 型 选择 符 (Type Selectors) 是 以 文档 中 的 对 象 (如 Element) 名 作为 选择 符 名 ,因此 类 
型 选择 符 可 以 使 一 个 元 素 从 原 有 的 样式 转变 成 另 一 种 样式 。 类 型 选择 符 的 语法 如 下 : 

E{ 样 式 属性 :属性 值 ; 样式 属性 :属性 值 ; …} 

说 明 . 下 为 文档 中 的 元 素 , 如 果 该 文档 是 XML 文档 , 则 下 为 XML 文档 中 所 声明 的 元 
素 ; 如 果 该 文档 是 HTML 文档 , 则 下 为 HTML 的 元 素 ,如 p\hl hr\img 等 。 

当 在 CSS 里 声明 了 某 个 元 素 的 类 型 选择 符 之 后 ,在 该 文档 中 所 有 被 声明 的 元 素 都 将 被 
赋予 该 样式 。 

2. 类 选择 符 

1) 类 选择 符 可 以 与 元 素 配 合 使 用 

当 类 选择 符 与 元 素 配合 使 用 时 ,类 选择 符 的 语法 如 下 : 

E. classname{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; …} 

说 明 : E 为 元 素 名 称 ,classname 是 标签 用 于 选择 样式 所 用 的 名 称 , 只 有 下 元 素 才 能 选 
择 是 否 使 用 classname。 

2) 独立 于 元 素 的 类 选择 符 

类 选择 符 可 以 与 元 素 配 合 使 用 ,也 可 以 独立 于 元 素 使 用 , 当 类 选择 符 独立 于 元 素 使 用 
时 ,类 选择 符 的 语法 如 下 : 

.classname{ 样 式 属性 :属性 值 ;样式 属性 . 属性 值 ; …} 

说 明 : classname 声明 样式 ,所 有 的 元 素 都 可 以 通过 class 二 "classname" 来 引用 该 样式 。 


3. ID 选择 符 


ID 选择 符 (ID Selectors) 的 使 用 方法 与 类 型 选择 符 和 类 选择 符 有 点 相似 ,其 语法 如 下 : 

# idname{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;…} 

说 明 : idname 是 对 应 这 个 id 的 属性 值 ,ID 选择 符 只 是 针对 网 页 中 某 一 个 元 素 的 ,这 个 
元 素 可 以 随便 是 什么 元 素 , 但 其 id 的 属性 值 必须 是 ID 选择 符 的 名 字 。 

4. 包含 选择 符 


在 CSS 的 选择 符 里 有 一 种 选择 符 叫 包含 选择 符 (Descendant Selectors) ,在 包含 选择 符 
里 可 以 为 一 个 特定 的 结构 创建 样式 。 例 如 ,可 以 创建 一 个 超 链接 的 样式 ,但 该 样式 只 有 在 超 


第 12 章 CSS 与 DIV ”223 


NA 
链接 包含 在 <p 二 标签 内 时 才 有 作用 。 包 含 选 择 符 的 语法 如 下 : 
El E2{ 样 式 属性 :属性 值 ; 样式 属性 :属性 值 ; …} 
说 明 : 只 有 包含 在 El 里 的 E2 选择 符 才 会 应 用 其 后 的 属性 值 。 包 含 选 择 符 不 仅 可 以 包 
含 类 型 选择 符 , 也 可 以 包含 类 选择 符 。 
5. 选择 符 分 组 


在 一 个 HTML 文档 里 ,有 可 能 多 个 标签 使 用 同一 种 样式 , 即 可 以 把 相同 样式 的 选择 符 
放 在 一 个 组 内 。 选 择 符 分 组 的 方式 如 下 : 


E1, E82, E3...{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; …} 

说 明 : El1、E2、E3 是 不 同 的 选择 符 , 它 们 将 使 用 后 面 的 同一 样式 。 
6. 适用 选择 符 

(1) 通用 选择 符 (Universal Selectors) 的 语法 如 下 : 

* {样式 属性 :属性 值 ;样式 属性 :属性 值 ; …} 


说 明 : * 代表 所 有 , 即 所 有 的 标签 都 使 用 该 样式 。 
(2) 让 某 一 标签 下 的 所 有 标签 使 用 同一 个 样式 ,此 时 通用 选择 符 的 语法 如 下 : 


Ex { 样 式 属性 :属性 值 ; 样 式 属 性 :属性 值 ;…} 

说 明 : 让 下 标签 下 的 所 有 标签 都 使 用 该 样式 。 

7. 子 选择 符 

从 某 个 程度 上 来 说 , 子 选择 符 (Child Selectors) 与 包含 选择 符 很 相似 ,但 必须 从 父 级 标 
签 指定 子 标签 ,其 语法 如 下 : 

El > E2{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;…} 

说 明 : 其 中 El 为 E2 的 父 级 标签 。 

8. 相 邻 选择 符 

相 邻 选 择 符 是 一 个 比较 有 意思 的 选择 符 ,该 选择 符 作 用 于 兄弟 标签 ,但 只 能 作用 在 相 邻 
的 两 个 兄弟 标签 之 间 ,其 语法 如 下 : 

El + E2{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;…} 

说 明 : E2 为 紧 跟 在 El 之 后 的 兄弟 标签 ,并且 样式 只 能 作用 在 E2 上 ,不 能 作用 在 El 上 。 

9. 属性 选择 符 

前 面 所 介绍 的 选择 符 有 针对 元 素 声明 的 (如 类 型 选择 符 )\ 有 针对 id 值 声明 的 (ID 选择 


符 ) ,在 CSS 中 还 有 一 种 选择 符 , 是 针对 元 素 中 的 不 同属 性 声明 的 ,这 种 选择 符 就 是 属性 选 
择 符 (Attribute Selectors) 。 属 性 选择 符 的 语法 如 下 : 
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E[ 属 性 ]{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; …} 

E[ 属 性 = 属性 值 ]{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; …} 

E[ 属 性 ”= 属性 值 ] {样式 属 性 :属性 值 ;样式 属性 :属性 值 ; …} 

E[ 属 性 | = 属性 值 ]{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; .…} 

如 上 所 示 ,属性 选择 符 有 4 种 表达 方式 ,不 同 的 表达 方式 所 代表 的 意思 不 一 样 。 
1) 第 一 种 表达 方法 

属性 选择 符 的 第 一 种 表达 方式 为 : 

KE[ 属 性 ]{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;…} 


说 明 : 这 种 属性 选择 符 的 意思 是 只 要 元 素 中 包含 该 属性 ,就 可 以 使 用 其 后 面 的 样式 。 

2) 第 二 种 表达 方式 

属性 选择 符 的 第 二 种 表达 方式 为 : 

[属性 = 属性 值 ]{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; .…} 

说 明 : 这 种 属性 选择 符 的 意思 是 元 素 中 包含 该 属性 ,并 且 该 属性 的 值 与 设 定 的 值 相同 ， 
那么 就 可 以 使 用 其 后 面 的 样式 。 

3) 第 三 种 表达 方式 

属性 选择 符 的 第 三 种 表达 方式 为 : 

E[ 属 性 ”= 属性 值 ]{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;.…} 

说 明 : "~ 二 "符号 就 像 是 约 等 于 ,只 要 下 标签 的 属性 中 有 一 个 单词 属于 属性 选择 符 中 
的 属性 值 ,就 可 以 使 用 其 后 面 的 样式 。 

4) 第 四 种 表达 方式 

最 后 一 种 属性 选择 符 的 表达 方式 为 : 

E[ 属 性 | = 属性 值 ]{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; .…} 

说 明 : 这 种 属性 选择 符 比 上 一 种 属性 选择 符 所 能 匹配 的 范围 要 小 得 多 ,上 一 种 属性 选 
择 符 所 能 匹配 的 是 单词 ,而 这 一 种 属性 选择 符 只 可 以 匹配 以 连 字 符 (-) 分 隔 的 字符 串 , 并 且 
只 能 是 以 属性 值 开 头 的 元 素 。 


12.1.3 伪 类 和 伪 元 素 

伪 类 (pseudo-class) 和 伪 元 素 (pseudo-element) 可 以 说 是 HTML 文档 中 并 不 实际 存在 
的 类 和 元 素 : 伪 类 通常 指 某 些 元 素 的 某 个 状态 ,例如 超 链接 元 素 存 在 4 个 状态 , 即 未 访问 过 
的 链接 ,已 访问 过 的 链接 、 鼠 标 经 过 时 的 链接 和 鼠标 单 击 时 的 链接 。 伪 元 素 通 常 指 某 个 对 象 
中 某 个 元 素 的 状态 ,例如 一 行文 字 中 第 一 个 字符 的 样式 等 。 

1. 超 链接 的 伪 类 

伪 类 最 开始 被 提出 时 可 以 说 完全 是 因为 超 链 接 ,在 CSS 1 中 只 有 3 个 伪 类 , 即 link、:visited 


和 :active, 这 3 个 伪 类 都 是 作用 在 超 链 接 上 的 ,分 别 代表 超 链接 的 3 个 状态 , 即 未 访问 过 的 
URL、 已 访问 过 的 URL、 正 在 单 击 的 超 链接 。 后 来 ,在 CSS 2 中 对 鼠标 经 过 超 链 接 时 的 状态 
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增加 了 一 个 伪 类 , 即 :hover。 这 4 个 伪 类 都 只 能 用 在 超 链接 上 ,其 使 用 方法 如 下 : 


a:visited{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;….} 
a:active{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;…} 

a:hover{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ; 
a:1ink{ 样 式 属性 :属性 值 ;样式 属性 :属性 值 ;.… 


说 明 : 以 上 代码 ,在 visited、active、hover 和 link 之 前 都 有 一 个 冒号 (:), 这 个 冒号 就 是 
伪 类 和 伪 元 素 的 标记 符 , 所 有 的 伪 类 和 伪 元 素 都 是 以 冒号 开头 的 。 冒 号 前 为 该 伪 类 或 伪 元 
素 作用 的 元 素 的 元 素 名 。 表 12-1 所 示 为 CSS 2 中 的 伪 类 。 
表 12-1 CSS 2 中 的 伪 类 
伪 类 作 用 
:link 设置 超 链接 未 被 访问 前 的 样式 ,如 果 超 链接 无 href 属性 , 则 该 样式 不 起 作用 
:hover 设置 鼠标 停放 在 该 元 素 上 时 的 样式 ,通常 也 用 于 超 链接 ,但 在 CSS 2 中 该 伪 类 还 可 以 用 在 
其 他 对 象 上 。 当 作用 在 超 链 接 上 时 ,如 果 超 链接 无 href 属性 , 则 该 样式 不 起 作用 
:active 设置 鼠标 单 击 时 的 样式 , 即 鼠 标 按 下 去 还 没有 释放 的 那 一 瞬间 的 样式 。 通 常 也 用 于 超 链 
接 ,但 在 CSS 2 中 该 伪 类 还 可 以 用 在 其 他 对 象 上 , 当 作用 在 超 链接 上 时 ,如 果 超 链接 无 
href 属性 , 则 该 样式 不 起 作用 
:visited 设置 超 链 接 已 被 访问 的 样式 ,如 果 超 链接 无 href 属性 , 则 该 样式 不 起 作用 
:focus 设置 对 象 获得 焦点 时 的 样式 
:first-child ”设置 某 标签 的 第 一 个 子 标签 的 样式 


:first 设置 页 面容 器 的 第 一 页 使 用 的 样式 ,通常 用 于 打印 控制 
:left 设置 页 面容 器 位 于 装订 线 左边 的 所 有 页 面 使 用 的 样式 ,通常 用 于 打印 控制 
:right 设置 页 面容 器 位 于 装订 线 右边 的 所 有 页 面 使 用 的 样式 ,通常 用 于 打印 控制 
:lang 设置 对 象 使 用 特殊 语言 的 内 容 的 样式 

2. 伪 元 素 


伪 元 素 和 伪 类 的 使 用 方法 类 似 , 伪 元 素 对 插入 到 文档 中 的 虚构 元 素 进 行 样式 设置 。 
常用 的 伪 元 素 有 first-letter 和 :firstrline, 这 两 个 伪 元 素 可 以 将 样式 作用 在 文字 的 首 字 
与 首 行 ,通常 用 在 块 级 元 素 中 。 
在 CSS 2 中 一 共 定 义 了 4 个 伪 元 素 , 伪 元 素 名 及 其 作用 如 表 12-2 所 示 。 
表 12-2 CSS 2 中 的 伪 元 素 


伪 元 素 作 用 

:first-letter 设置 对 象 中 的 第 一 个 字母 的 样式 , 仅 用 在 块 元 素 中 

:first-line 设置 对 象 中 的 第 一 个 文字 的 样式 , 仅 用 在 块 元 素 中 

:before 设置 在 对 象 前 发 生 的 内 容 , 用 来 与 content 属性 (CSS 2 中 的 属性 ) 一 起 使 用 
:after 设置 在 对 象 后 发 生 的 内 容 , 用 来 与 content 属性 一 起 使 用 


12.1.4 ”CSS 的 优先 级 


由 于 样式 具有 多 种 选择 符 , 而 选择 符 之 间 又 有 继承 性 与 层 释 性 ,在 设计 样式 时 ,就 有 可 
将 多 个 样式 加 载 在 同一 个 标签 元 素 上 ,如 果 这 些 样式 都 不 相同 , 则 该 标签 元 素 可 以 同时 拥有 
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这 几 种 样式 ,但 如 果 样 式 相同 ,只 是 属性 值 不 同 , 就 会 产生 样式 冲突 。 
在 CSS 中 对 于 每 种 不 同类 型 的 样式 选择 符 都 有 一 个 特殊 性 (specificity) ,特殊 性 使 用 相 
对 权重 (weight) (也 就 是 优先 级 ) 来 描述 不 同 的 样式 选择 符 。 
CSS 可 以 根据 产生 冲突 的 样式 选择 符 的 权重 来 判断 使 用 哪 种 样式 ,通常 是 选择 权重 大 
的 样式 而 忽略 权重 小 的 样式 。 在 CSS 2. 1 中 使 用 一 个 4 位 的 数字 串 来 表示 权重 ,以 下 是 有 
关 权 重 的 一 些 规定 : 
。 类 型 选择 符 (E) 的 权重 为 0001 。 
。 类 选择 符 (. classname) 的 权重 为 0010。 
ID 选择 符 (#idname) 的 权重 为 0100。 
通用 选择 符 ( x ) 的 权重 为 0000。 
子 选择 符 的 权重 为 0000。 
属性 选择 符 ([attr]) 的 权重 为 0010。 
伪 类 选择 符 (:pseud-classes) 的 权重 为 0010。 
伪 元 素 (:pseud-elements) 的 权重 为 0001 。 
包含 选择 符 的 权重 为 包含 的 选择 符 权 重 值 之 和 。 
内 联 样式 的 权重 为 1000。 
。 继承 的 样式 的 权重 为 0000。 
以 上 权重 由 大 至 小 依次 是 1000、0100、0010、0001、0000。 


12.1.5 CSS 中 的 单位 
CSS 中 的 单位 可 以 简单 地 分 为 颜色 单位 ,长 度 单位 、 时 间 单位 、 角 度 单位 和 频率 单位 


. 


1. 颜色 单位 


在 CSS 中 经 常会 用 到 颜色 ,而 表达 颜色 的 方式 主要 有 并 RRGGBB rgb(R,G,B) 和 颜色 
名 称 。 

RRGGBB 表示 方法 是 比较 常用 的 一 个 表示 方法 ,其 中 RR 代表 红色 值 \.GG 代表 绿色 
值 `.BB 代表 蓝 色 值 , 取 值 范围 都 是 00 一 FF。 例 如 ,红色 可 以 用 *#FF0000" 来 表示 。 

rgb(R,G,B) 是 颜色 的 另 一 种 表示 方法 ,其 中 R 代表 红色 值 .G 代表 绿色 值 .B 代表 蓝 
色 值 , 取 值 范围 都 是 0 一 255 或 0%~~100%。 例 如 ,红色 可 以 用 rgb(255.0,0) 或 rgb(100%， 
0%,0%) 来 表示 。 使 用 百分数 的 表示 方法 不 是 所 有 浏览 器 都 支持 的 。 

使 用 颜色 名 称 来 表达 颜色 是 比较 直观 的 ,例如 红色 可 以 直接 用 red 来 表示 ,但 不 同 的 浏 
览 器 会 有 不 同 的 预定 义 的 颜色 名 称 。 

2. 长 度 单位 

在 CSS 中 长 度 单位 分 为 两 种 ,一 种 是 绝对 长 度 单位 , 另 一 种 是 相对 长 度 单位 。 绝 对 长 
度 单位 包括 pt、cem、mm.in 和 pc 等 。 


。in: 英寸 (inch) ,常用 的 度量 单位 。 
。 pt: 磅 ,这 是 标准 的 印刷 量度 ,广泛 使 用 在 打印 与 排版 上 ,72 磅 相当 于 1 英寸。 
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。 cm: 厘米 (centimeter) ,全 世界 统一 的 度量 单位 ,1 英寸 等 于 2. 54 厘米 ,1 厘米 等 于 
0.394 英寸 。 

。 mm: 毫米 (millimeter) ,全 世界 统一 的 度量 单位 ,1 厘米 等 于 10 毫米 。 

。 pc: 派 卡 (pica) ,相当 于 我 国 新 四 号 铅字 大 小 。 

以 上 5 种 绝对 长 度 单位 的 换算 方法 为 lin = 2. 54cm 一 25. 4mm 一 72pt 

12pc。 

相对 长 度 单位 包括 px、ex 和 em 等 。 

。 px: 像素 (pixel) ,相对 于 显示 器 屏幕 的 分 辩 率 而 言 。 

。 ex: 相对 于 字符 “x” 的 高 度 , 该 高 度 通 常 为 字体 尺寸 的 一 半 。 

。 em: 相对 于 当前 对 象 内 文本 的 字体 尺寸 。 


3. 时 间 单 位 


6pc 


在 CSS 中 时 间 单 位 只 有 两 种 , 即 s( 秒 ) 和 ms( 毫 秒 ) ,其 中 1s 一 1000ms。 
4. 角度 单位 


在 CSS 中 角度 单位 包括 deg 、grad 和 rad 等 。 

。 deg: 就 是 平常 所 说 的 “ 度 ”, 一 个 圆 等 于 360deg。 

。 grad: 梯度 ,一 梯度 为 一 个 直角 的 百 分 之 一 ,一 个 圆 等 于 400grad。 
。 rad: 弧度 ,把 一 个 圆 分 为 2PIrad。 


5. 频率 单位 
在 CSS 中 频率 单位 只 有 两 种 , 即 Hz( 赫 兹 ) 和 kHz( 千 赫兹 ) ,它们 都 是 声波 单位 ,其 中 
1kHz=1000Hz。 


(2 文字 和 文本 样式 


在 CSS 样式 中 ,最 基本 的 属性 是 用 来 设置 文字 和 文本 的 样式 。“ 文 字 ” 指 的 是 单个 文字 
或 单词 ， 文 本” 指 的 是 由 文字 组 成 的 内 容 。 为 字体 设置 样式 主要 是 设置 字 、 词 的 样式 ,为 文 
本 设置 样式 主要 是 对 整 段 文章 设置 样式 。 


12.2.1 设置 文字 样式 


在 CSS 中 对 文字 样式 的 设置 有 文字 字体 文字 大 小 .文字 粗 体 以 及 文字 斜体 等 的 设置 。 
1. 设置 字体 


在 HTML 中 可 以 使 用 二 font face= "字体 名 "之 设置 文字 字体 ,而 在 CSS 中 设置 字体 所 
用 的 属性 是 font-family, 其 语法 如 下 : 


font - family:" 字 体 1" "字体 2" "字体 3"..…. 


说 明 : 在 这 里 ,可 以 为 文字 设置 多 个 字体 , 当 在 运行 页 面 的 浏览 器 中 找 不 到 第 一 种 字体 
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的 时 候 就 会 使 用 第 二 种 字体 显示 ; 如 果 找 不 到 第 二 种 字体 , 则 会 以 第 三 种 字体 显示 , 依 此 类 
推 。 如 果 设 置 的 几 种 字体 在 浏览 器 中 都 无 法 找到 ,会 自动 以 浏览 器 设置 的 默认 字体 显示 。 

2. 设置 文字 大 小 

设置 文字 大 小 是 指 为 页 面 中 的 文字 设置 绝对 大 小 或 相对 高 度 。 

使 用 CSS 样式 设置 文字 大 小 的 语法 如 下 : 

font - size: 文 字 的 大 小 

说 明 : 此 处 的 文字 大 小 可 以 是 相对 高 度 , 也 可 以 是 绝对 大 小 ,相对 高 度 是 指 文字 相对 于 
父 对 象 文 字 尺 寸 来 设置 ,包括 larger 和 smaller, 使 用 成 比例 的 em 单位 计算 ; 绝对 高 度 设置 
的 是 固定 的 大 小 ,包括 xx-small、x-small、larger 等 。 

除了 使 用 英文 单词 表示 文字 大 小 之 外 ,还 有 一 种 文字 大 小 的 设置 方式 ,就 是 使 用 具 
体 的 长 度 值 或 百分比 。 表 12-3 显示 了 在 CSS 样式 表 中 设置 文字 大 小 的 属性 值 、 含 义 以 及 
规则 。 

表 12-3 CSS 样式 表 中 可 以 设置 的 文字 大 小 


类 型 font-size 取 值 或 单位 表示 的 含义 

xx-small 极 小 
x-small 很 小 
small 小 
medium 中 

用 英文 单词 表示 绝对 大 小 larger pF 
x-large 很 大 
xx-large 极 大 
larger 较 大 ,一 般 比 父 对 象 中 的 字体 大 一 些 
smaller 较 小 ,一 般 比 父 对 象 中 的 字体 小 一 些 
pt 点 ,1 点 二 1/72 英寸 

采用 具体 的 长 度 值 ( 浮 点 数 十 单位 ) px 像素 
in 英寸 

采用 百分比 % 相对 于 父 对 象 中 字体 的 尺寸 的 比例 


当 浏 览 器 窗口 设置 的 默认 字体 变 大 的 时 候 , 只 有 设置 了 固定 像素 值 的 文字 大 小 是 绝对 
不 变 的 。 也 就 是 说 ,如 果 和 希望 在 页 面 中 显示 的 文字 不 随 浏览 器 的 设置 而 变化 , 则 需要 使 用 具 
体 的 长 度 值 来 设置 文字 的 大 小 。 


3. 设置 粗 体 


在 页 面 中 经 常 使 用 加 粗 的 字体 表示 强调 ,但 是 在 HTML 标记 中 加 粗 的 程度 只 有 一 种 ， 
通过 CSS 样式 可 以 为 文字 设置 不 同 程度 的 加 粗 效果 ,其 语法 如 下 : 
font - weight: 字 体 的 粗 度 


说 明 : 在 这 里 ,字体 的 粗 度 可 以 使 用 数值 表示 ,也 可 以 使 用 英文 单词 表示 。 其 具体 的 取 
值 及 含义 如 表 12-4 所 示 。 
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表 12-4 字体 粗细 取 值 
字体 的 粗细 取 值 取 值 的 含义 
100 一 900 数值 越 小 ,字体 越 细 ,要求 所 取 的 数值 是 整 百 的 , 即 100、200、300 等 
normal 正常 字体 效果 
bold 加 粗 字体 ,字体 的 粗细 与 设置 为 700 基本 相同 
bolder 特 粗 字 体 , 就 是 在 加 粗 字 体 的 基础 上 再 加 粗 , 基 本 相当 于 设置 为 900 的 效果 
lighter 细 体 字 ,相对 默认 字体 更 细 一 些 
4. 设置 文字 颜色 


在 CSS 样式 表 中 设置 文字 颜色 的 属性 是 color, 其 语法 如 下 : 

color: 颜 色 代码 /颜色 名 称 

说 明 : 这 里 的 颜色 代码 是 指 颜 色 的 十 六 进 制 数 ,颜色 名 称 是 颜色 的 英文 名 。 

5. 设置 斜体 

在 CSS 样式 表 中 也 可 以 将 文字 设置 为 斜体 显示 ,而 且 倾斜 的 程度 有 两 种 , 即 倾斜 字体 
和 偏 斜 体 。 其 设置 语法 如 下 : 

font - style:normal/italic/oblique 

说 明 : font-style 可 以 取 normal( 正 常 字 体 ) \italic( 倾 斜 ) 和 oblique( 偏 斜体 )3 种 值 。 

6. 综合 应 用 


前 面 介绍 的 几 种 属性 都 是 以 font 开始 的 ,表示 这 几 种 属性 属于 同一 类 别 ,都 是 用 来 设 
置 文字 的 字体 效果 的 。 在 CSS 样式 表 中 还 可 以 很 方便 地 设置 字体 属性 , 即 直接 使 用 font 属 
性 进行 设置 ,其 语法 如 下 : 

font: 字 体 属性 取 值 

说 明 : 在 这 里 ,字体 属性 取 值 可 以 直接 设置 各 种 属性 值 ,各 属性 值 之 间 用 空格 隔 开 。 


12.2.2 设置 文本 样式 


文本 样式 设置 是 对 一 段 文字 整体 进行 设置 。 文 本 样式 设置 包括 设置 阴影 效果 、 大 小 写 
转换 文本 缩 进 、 文 本 对 齐 方式 等 。 

1. 设置 阴影 效果 

在 CSS 2 中 允许 设置 文字 的 阴影 ,让 文字 看 起 来 更 有 立体 感 。 设 置 阴影 所 用 的 属性 为 
text-shadow ,其 语法 如 下 : 

text - shadow:none | color | length | inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 none: 不 设置 阴影 。 
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。 color: 阴影 的 颜色 。 

。 length: 长 度 值 。 

。 inherit: 继承 父 级 样式 。 

CSS 中 的 阴影 有 3 个 length 需要 进行 设置 ,第 1 个 是 水 平方 向 的 距离 ,可 以 为 负 值 ; 第 
2 个 是 垂直 方向 的 距离 ,可 以 为 负 值 ; 第 3 个 为 模糊 半径 的 长 度 ,不 能 为 负 值 。 

2. 大 小 写 转 换 


在 CSS 中 处 理 大 小 写 都 是 通过 text-transform 属性 完成 的 ,其 语法 如 下 : 
text - transform: capitalize | uppercase | lowercase | none | inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
。 capitalize: 将 每 个 文字 的 第 一 个 字母 大 写 。 
。 uppercase: 将 整个 文字 都 变 成 大 写 。 

。 lowercase: 将 整个 文字 都 变 成 小 写 。 
none: 不 改变 文字 的 大 小 写 。 

inherit: 继承 父 级 样式 。 


3. 文本 缩 进 


在 没有 使 用 CSS 之 前 ,一 段 文字 的 首 行 缩 进 都 是 使 用 空格 实现 的 ; 在 有 了 CSS 之 后 ， 
网 页 开发 者 就 不 再 需要 在 每 个 段落 之 前 都 加 两 个 空格 了 ; 使 用 CSS 中 的 text-indent 属性 
可 以 轻易 地 达到 缩 进 的 目的 。text-indent 属性 的 语法 如 下 : 

text - indent:length| 百 分 数 |inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 length: 缩 进 量 ,可 以 使 用 绝对 单位 值 与 相对 单位 值 。 

。 百分数 : 相对 于 父 级 元 素 的 百 分 之 多 少 来 缩 进 。 

。 inherit: 继承 父 级 样式 。 


4. 文本 的 水 平 对 齐 方式 


使 用 text-align 属性 可 以 在 CSS 样式 表 中 设置 文本 的 水 平 对 齐 属 性 ,包括 左 对 齐 、 右 对 
齐 ` 居 中 对 齐 和 两 端 对 齐 , 其 设置 语法 如 下 : 


text - align: left | right | center | justify 
5. 文本 的 垂直 对 齐 方式 


文本 的 垂直 对 齐 属性 vertical-align 相当 于 HTML 中 的 垂直 对 齐 标记 ,用 于 设置 文本 
和 其 他 元 素 ( 一 般 是 上 一 级 元 素 或 者 同行 的 其 他 元 素 ) 的 垂直 对 齐 方式 ,其 语法 如 下 : 
vertical - align:baseline | sub | super | top | bottom | text - top | middle | text - bottom | 百分比 


说 明 : 对 属性 值 的 详细 说 明 见 表 12-5。 
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表 12-5 ”垂直 对 齐 的 取 值 含义 


纵向 对 齐 的 取 值 具体 含义 

baseline 设置 文本 和 上 级 元 素 的 基线 对 齐 

sub 设置 文本 显示 为 上 级 元 素 的 下 标 , 常 在 数组 中 使 用 

super 设置 文本 显示 为 上 级 元 素 的 上 标 , 常 用 于 设置 某 个 数值 的 乘 方 数 

top 使 文本 元 素 和 同行 中 最 高 的 元 素 上 端 对 齐 

bottom 使 文本 元 素 和 同行 中 高 度 最 低 的 元 素 向 下 对 齐 

text-top 使 文本 元 素 和 上 级 元 素 的 文本 向 上 对 齐 

middle 使 文本 垂直 居中 对 齐 , 假 如 元 素 的 基线 与 上 级 元 素 的 X 高 度 的 一 半 相 加 的 值 为 五， 


则 文本 与 高 度 互 的 中 点 纵向 对 齐 。 其 中 ,X 指 字母 “X” 的 高 度 

text-bootom 使 文本 元 索 和 上 级 元 素 的 文本 向 下 对 齐 

百分比 相对 于 元 素 行 高 属性 的 百分比 , 它 会 在 上 级 元 素 基 线 上 增加 指定 的 百分比 ,如 果 取 值 
为 正 数 , 则 表示 增加 设置 的 百分比 ,如 果 取 值 为 负数 , 则 表示 减少 相应 的 百分比 


6. 设置 文本 流入 方向 
CSS 中 的 direction 属性 可 以 用 来 设置 文本 流入 的 方向 ,direction 属性 的 语法 如 下 : 


direction:ltr | rtl | inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 ltr: left to right 的 简写 ,用 于 设置 文本 从 左 到 右 流 入 ,该 值 为 direction 属性 的 默 

认 值 。 

。 rtl: right to left 的 简写 ,用 于 设置 文本 从 右 到 左 流入 。 

。 inherit: 继承 父 级 样式 。 

文本 流入 方向 与 水 平 对 齐 不 同 的 是 ,句号 总 是 放 在 文本 流入 方向 的 最 后 面 ,文本 流入 方 
向 为 从 左 向 右 流入 时 ,句号 在 文本 的 右 侧 ; 文本 流入 方向 为 从 右 向 左 流入 时 ,句号 在 文本 的 
左 侧 。 

7. 设置 文本 修饰 


文本 修饰 一 般 包括 设置 文字 带 有 下 划 线 、 上 划 线 .删除 线 等 ,这 些 都 可 以 使 用 text- 
decoration 属性 来 设置 ,其 语法 如 下 : 


text - decoration: underline | overline | line - through | blink | none 


说 明 : text-decoration 属性 可 以 取 5 种 值 ,其 含义 分 别 见 表 12-6。 
表 12-6 文本 的 修饰 属性 


文本 修饰 属性 值 取 值 的 具体 含义 

underline 给 文字 添加 下 划 线 效果 

overline 给 文字 添加 上 划 线 效果 

line-through 给 文字 添加 删除 线 效果 

blink 给 文字 添加 闪烁 效果 ,只 有 在 Netscape 浏览 器 中 才能 看 到 效果 


none 不 设置 任何 修饰 属性 
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12.2.3 空白 与 换行 


在 HTML 代码 中 通常 会 出 现 很 多 空格 与 换行 ,这 些 空格 与 换行 在 浏览 器 中 显示 时 往 
往 不 按照 源 代码 中 的 出 现 方式 来 显示 。 在 CSS 中 可 以 设置 如 何 处 理 这 些 空格 与 换行 。 


1. 空格 的 处 理 方式 


在 HTML 中 ,浏览 器 会 自动 将 多 个 连续 空格 处 理 成 一 个 空格 ,也 可 以 使 用 pre 元 素 让 
浏览 器 在 显示 时 不 更 改 源 代码 里 的 排版 方式 。 这 些 在 CSS 中 都 可 以 统一 使 用 white-space 
属性 来 完成 ,white-space 属性 的 语法 如 下 : 


white - space: normal | pre | nowrap | inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 normal: 默认 值 ,浏览 器 会 自动 忽略 多 余 的 空格 ,连续 多 个 空格 只 显示 一 个 。 
。 pre: 与 pre 元 素 类 似 , 浏 览 器 不 忽略 源 代 码 中 的 空格 。 

nowrap: 设置 文字 不 自动 换行 。 

inherit: 继承 父 级 样式 。 


2. 字 内 换行 

当 文本 宽度 超出 浏览 器 宽度 的 时 候 , 在 默认 情况 下 会 自动 换行 ,但 如 果 正 好 是 在 较 长 的 
英文 单词 中 间 ,那么 整个 单词 都 会 被 移动 到 下 一 行 显示 ,这 样本 行 的 右 侧 就 有 了 较 大 的 空 
白 ,影响 美观 ,使 用 字 内 换行 属性 可 以 将 英文 单词 打 散 显 示 , 也 可 以 设置 在 换行 前 或 换行 后 
整体 显示 ,其 设置 语法 如 下 : 


word - break: normal | break - all | keep - all 

说 明 : normal 是 正常 情况 下 的 显示 方式 , 当 在 单词 中 需要 换行 的 时 候 ,该 单词 会 在 下 
一 行 显示 ,而 本 行 后 面 保 留 空白 ; break-all 允许 非 亚 洲 语言 文本 行 的 任意 字 内 断 开 ; keep- 
all 与 所 有 非 亚 洲 语言 的 normal 相同 ,对 于 中 文 韩文 日文 不 允许 断 开 。 


12.2.4 设置 间距 


在 CSS 中 可 以 定义 文字 与 文字 之 间 的 距离 ,其 中 包括 行 间 距 、 字 间距 与 词 间距 ,不 同 的 
间距 可 以 控制 页 面 的 不 同 显示 效果 。 

1. 行 间距 

行 间距 是 指 文本 行 与 行 之 间 的 距离 ,在 CSS 中 不 能 直接 定义 行 间距 ,只 能 通过 line- 


height 属性 定义 行 高 。 所 谓 行 高 是 指 上 一 行文 字 的 基线 与 下 一 行文 字 的 基线 之 间 的 距离 ， 
行 高 等 于 行 间距 加 上 文字 高 度 。line-height 属性 的 语法 如 下 。 


line - height:normal | number | length | 百分数 | inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
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normal: 默认 值 , 使 用 的 是 默认 行 高 。 

number: 在 当前 文字 大 小 的 基础 上 做 增加 来 设置 行 高 ,不 能 为 负 值 。 

。 length: 指定 行 高 数 , 可 以 是 绝对 长 度 单位 ,也 可 以 是 相对 长 度 单位 ,不 能 是 负 值 。 
百分数 : 用 百分数 指定 行 高 ,相当 于 字体 大 小 的 百 分 之 多 少 。 

。 inherit: 继承 父 级 属性 。 


2. 字 间 距 


在 CSS 中 可 以 通过 letter-spacing 属性 来 设置 字 间距 。 对 于 英文 来 说 , 字 间 距 是 指 每 个 
字母 之 间 的 距离 ,对 于 中 文 来 说 , 字 间 距 是 每 个 字 之 间 的 距离 。letter-spacing 属性 的 语法 
如 下 : 

letter - spacing:normal | length | inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 normal: 默认 值 , 使 用 默认 的 字 间 距 。 
length: 设置 字 间 距 , 可 以 是 绝对 单位 也 可 以 是 相对 单位 。 
inherit: 继承 父 级 属性 。 


3. 词 间距 

在 CSS 中 可 以 使 用 word-spacing 设置 词 间距 , 词 间距 是 针对 英文 而 言 的 。 目 前 ,浏览 
器 还 不 能 区 分 中 文 的 * 词 "与 “ 字 ”,word-spacing 属性 的 语法 如 下 : 

word - spacing:normal | < length >| inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 normal: 默认 值 ,使 用 默认 的 词 间距 。 

。 length: 设置 词 间距 的 大 小 ,可 以 是 绝对 单位 值 也 可 以 是 相对 单位 值 。 
。 inherit: 继承 父 级 属性 。 


12.2.5 CSS 注释 


CSS 中 的 注释 与 HTML 中 的 注释 有 所 不 同 ,CSS 中 的 注释 采用 的 格式 如 下 : 
/* 注释 内 容 * / 
说 明 : 注释 可 以 是 单独 的 一 行 ,也 可 以 跨行 ,但 不 能 嵌 套 。 


CC. 3 ”设置 表格 .列表 和 滚动 条 样式 


表格 、 列 表 和 滚动 条 是 网 页 设计 中 比较 常用 的 一 些 元 素 。 在 CSS 中 提供 了 许多 属性 进 
行 表格 、 列 表 和 滚动 条 样式 的 设置 ,通过 设置 这 些 样 式 可 以 让 网 页 内 容 更 加 吸引 浏览 者 的 
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12.3.1 设置 表格 样式 


在 CSS 中 有 一 些 样式 是 在 表格 里 使 用 得 比较 多 的 ,在 此 统称 为 表格 样式 。 这 些 样 式 可 
以 实现 合并 边框 设置 边框 间距 ,设置 表 格 标题 的 位 置 .设置 表格 布局 等 功能 。 


1. 边框 


在 一 个 表格 中 同时 存在 着 两 种 边框 ,一 种 是 表格 的 表 框 , 即 表格 最 外 面 的 4 条 边框 ; 另 
一 种 是 单元 格 的 边框 ,每 一 个 单元 格 都 有 自己 的 边框 。 在 默认 情况 下 ,这 两 种 不 同 的 边框 是 
分 开 显 示 的 ,但 在 CSS 的 border-collapse 属性 的 作用 下 ,可 以 将 这 两 种 边框 合并 起 来 。 
border-collapse 属性 的 语法 如 下 : 

border - collapse: collapse | separate | inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 collapse: 合并 两 种 边框 。 
separate: 两 种 边框 独立 ,该 值 为 默认 值 。 
inherit: 继承 父 级 样式 。 


2. 定义 表格 边框 的 间距 


在 CSS 中 可 以 使 用 border-spacing 属性 为 表格 设置 边框 间距 ,这 一 点 与 HTML 中 
table 元 素 的 cellspacing 属性 十 分 类 似 。border-spacing 属性 的 语法 如 下 : 

border - spacing: 宽度 |inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 宽度 : 边框 间距 的 大 小 ,可 以 是 绝对 单位 值 也 可 以 是 相对 单位 值 , 但 不 能 是 负数 。 

。 inherit: 继承 父 级 样式 。 

只 有 当 border-collapse 属性 值 为 separate, 或 没有 设置 border-collapse 属性 值 时 ， 
border-spacing 属性 才 会 生效 ,否则 该 属性 不 会 产生 作用 。IE 浏览 器 不 支持 border-spacing 
属性 。 

3. 定义 表格 标题 的 位 置 


在 HTML 中 可 以 使 用 caption 元 素 设置 表格 的 标题 ,而 在 CSS 中 caption-side 属性 可 
以 用 来 设置 将 标题 放 在 表格 的 什么 位 置 ,caption-side 属性 的 语法 如 下 : 


caption:top | bottom | left | right | inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
top: 标题 位 于 表格 顶部 。 

bottom: 标题 位 于 表格 底部 。 

left: 标题 位 于 表格 左 侧 。 

right: 标题 位 于 表格 右 侧 。 

inherit: 继承 父 级 样式 。 
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使 用 caption 元 素 的 align 属性 和 valign 属性 同样 可 以 将 表格 标题 放 在 表格 的 不 同位 
置 ,不 同 的 浏览 器 对 这 两 个 属性 的 支持 情况 不 完全 一 样 。 


4. 设置 表格 布局 


当 一 个 单元 格 里 对 象 的 宽度 超过 单元 格 所 定义 的 宽度 时 ,在 能 换行 时 (如 文字 ) ,浏览 器 
会 自动 在 宽度 的 最 大 处 换行 ,在 不 能 换行 时 (如 图 片 或 一 个 超 长 单词 ) ,浏览 器 会 自动 调整 表 
格 列 的 宽度 ,以 容纳 单元 格 中 的 对 象 。 在 CSS 中 有 一 个 名 为 table-layout 的 属性 可 以 设置 
是 否 保证 单元 格 宽度 不 被 改变 ,table-layout 属性 的 语法 如 下 : 


table - layout:auto | fixed | inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 auto: 当 内 容 超过 宽度 时 ,如 能 自动 换行 则 自动 换行 ,如 不 能 自动 换行 则 增加 宽度 ， 
该 值 为 默认 值 。 

。 fixed: 无 论 内 容 是 否 超过 宽度 ,都 保持 原来 的 宽度 。 

。 inherit: 继承 父 级 样式 。 


12.3.2 设置 列表 样式 


在 CSS 中 有 专门 的 设计 列表 的 样式 ,使 用 这 些 样式 可 以 用 图 片 代替 列表 前 的 标号 ,也 
可 以 用 不 同 的 方式 显示 列表 前 的 标号 ,还 可 以 设置 列表 文字 的 排列 方式 以 及 间距 。 


1. 设置 列表 符号 样式 


在 HTML 中 的 列表 符号 只 能 是 一 个 黑 点 或 数字 ,显得 十 分 单调 ,使 用 CSS 中 的 list- 
style-type 属性 可 以 指定 符号 的 样式 ,其 语法 如 下 : 
list - style - type: circle | disc | decimal | square | upper - roman | lower - roman | upper - 
alpha | lower - alpha | none | armenian | cjk- ideographic | georgian | hebrew | lower - greek | 
hiragana | hiragana - iroha | katakana | katakana - iroha | lower - latin | upper - latin 
说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
。 circle: 显示 空心 圆 标 号 。 
。 disc: 默认 值 ,显示 实心 圆 标 号 。 
。 decimal: 显示 阿拉 伯 数 字 。 
。 square: 显示 实心 方块 标号 。 
。 upper-roman: 显示 大 写 罗马 数字 。 
。 lower-roman: 显示 小 写 罗马 数字 。 
upper-alpha: 显示 大 写 英文 字母 。 
lower-alpha: 显示 小 写 英文 字母 。 
none: 不 使 用 项 目 符号 。 
由 于 后 面 的 属性 目前 的 主流 浏览 器 都 不 支持 ,所 以 此 处 不 再 说 明 。 
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2. 使 用 图 片 设置 列表 样式 

除了 可 以 采用 系统 提供 的 一 些 列表 符号 ,在 CSS 中 还 可 以 利用 list-style-image 属性 设 
置 图 像 作 为 列表 符号 ,其 语法 如 下 : 

list - style - image:url( 源 文件 地 址 ) 

说 明 : 此 处 属性 值 为 图 片 的 地 址 ,为 了 使 列表 符号 能 够 清晰 显示 ,不 要 选择 过 大 的 图 
片 , 图 片 格式 为 JPEG GIF .PNG 几 种 。 

3. 列表 符号 的 显示 位 置 

当 在 列表 中 使 用 了 文本 样式 (如 背景 颜色 等 ) 时 ,可 以 用 list-style-position 属性 指定 符 
号 的 显示 位 置 , 即 指定 符号 是 放 在 文本 块 之 外 还 是 放 在 文本 块 之 内 ,list-style-position 属性 
的 语法 如 下 : 

list - style - position:outside | inside 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 onutside: 将 列表 符号 放 在 文本 块 之 外 ,该 值 为 默认 值 。 

。 inside: 将 列表 符号 放 在 文本 块 之 内 。 

list-style-position 属性 可 以 作用 在 二 ol 二 .二 ul 二 和 <1i 之 标签 上 。 

4. 综合 设置 列表 样式 

在 CSS 中 可 以 使 用 list-style 属性 综合 设置 列表 的 所 有 样式 ,使 用 list-style 为 列表 设 
置 样式 可 以 不 输入 list-style-image,list-style-type 或 list-style-position 属性 名 ,直接 输入 属 
性 值 来 简化 输入 即 可 。list-style 属性 的 语法 如 下 : 

list - style:list ~ style - image | list ~ style- type | list - style -~ position 

说 明 : 在 使 用 list-style 设置 列表 样式 时 要 注意 以 下 两 点 。 

。 当 同 时 指定 list-style-image 和 list-style-type 时 ,list-style-image 将 优先 显示 ,除非 

list-style-image 为 none, 或 图 片 地 址 错误 而 无 法 显示 。 
。 当 列 表 与 列表 项 同时 使 用 样式 时 ,列表 项 的 样式 将 优先 显示 。 


与 list-style-image、list-style-type 和 list-style-position 样式 相同 ,list-style-position 样 
式 可 以 作用 在 二 ol 二 ,二 ul 和 li 二 标签 上 。 


12.3.3 设置 滚动 条 样式 


滚动 条 一 般 都 有 立体 效果 ,这 个 效果 是 通过 边框 的 亮 暗 对 比 来 体现 的 , 亮 的 边框 就 好 像 
是 光照 到 的 地 方 , 暗 的 边框 就 好 像 是 由 于 光线 被 遮挡 出 现 的 阴影 效果 ,利用 CSS 中 的 滚动 
条 属性 可 以 设置 滚动 条 的 各 种 颜色 效果 ,例如 滚动 条 的 边框 颜色 表面 效果 等 。 


1. 设置 滚动 条 颜色 
使 用 scrollbar-face-color 属性 可 以 设置 滚动 条 的 颜色 ,其 语法 如 下 : 
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scrol lbar - face - color: 颜 色 


说 明 : scrollbar-face-color 的 属性 值 只 有 一 个 ,就 是 颜色 ,其 值 可 以 是 十 六 进 制 的 RGB 
颜色 .颜色 的 英文 名 或 用 百分比 表示 颜色 。 


2. 设置 滚动 条 亮 边 框 颜色 


使 用 scrollbar-highlight-color 属性 可 以 设置 滚动 条 亮 边 框 的 颜色 ,也 就 是 滚动 条 左边 
和 上 边 边框 的 颜色 ,其 语法 如 下 : 


scrol lbar - highlight - color: 颜 色 

说 明 : scrollbar-highlight-color 的 属性 值 只 有 一 个 ,就 是 颜色 ,其 值 可 以 是 十 六 进 制 的 
RGB 颜色 ,颜色 的 英文 名 或 用 百分比 表示 颜色 。 

3. 设置 滚动 条 暗 边框 颜色 

用 户 可 以 设置 亮 边框 颜色 就 可 以 设置 暗 边框 颜色 ,也 就 是 滚动 条 右边 和 下 边 边 框 的 颜 
色 。 如 果 要 设置 暗 边框 的 颜色 ,可 以 使 用 scrollbar-shadow-color 属性 , scrollbar-shadow- 
color 属性 的 语法 如 下 : 


scrol lbar - shadow - color: 颜 色 


说 明 : scrollbar-shadow-color 的 属性 值 只 有 一 个 ,就 是 颜色 ,其 值 可 以 是 十 六 进 制 的 
RGB 颜色 .颜色 的 英文 名 或 用 百分比 表示 颜色 。 


4. 设置 滚动 条 方向 箭头 颜色 
scrollbar-arrow-color 属性 可 以 用 来 设置 滚动 条 的 方向 箭头 的 颜色 ,其 语法 如 下 : 
scrol lbar - arrow - color: 颜 色 


说 明 : scrollbar-arrow-color 的 属性 值 只 有 一 个 ,就 是 颜色 ,其 值 可 以 是 十 六 进 制 的 
RGB 颜色 、 颜 色 的 英文 名 或 用 百分比 表示 颜色 。 


5. 设置 滚动 条 基准 颜色 


scrollbar-base-color 属性 可 以 用 来 设置 滚动 条 的 基准 颜色 ,在 设置 了 基准 颜色 之 后 , 滚 
动 条 的 其 他 颜色 都 会 根据 该 颜色 自动 调整 ,包括 箭头 颜色 ,边框 颜色 等 ,其 语法 如 下 : 


scrol lbar - base - color: 颜 色 


说 明 : scrollbar-base-color 的 属性 值 可 以 是 十 六 进 制 的 RGB 颜色 .颜色 的 英文 名 。 


f2.4 设置 背景 .边框 . 边 距 和 补 和 白 


背景 颜色 背景 图 片 .边框 和 边 距 是 网 页 设计 中 用 得 比较 多 的 修饰 方法 ,合理 地 配置 网 
页 的 前 景色 与 背景 色 ,再 加 上 边框 和 边 距 的 辅助 ,可 以 让 网 页 看 起 来 更 漂亮 。 
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1. 背景 颜色 


背景 通常 指 除 了 文本 与 边框 之 外 的 所 有 颜色 。 在 CSS 中 可 以 使 用 background-color 
来 设置 背景 颜色 ,background-color 属性 的 语法 如 下 : 


background - color:transparent | 颜色 | inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 transparent: 设置 背景 颜色 透明 ,该 值 为 默认 值 。 

。 颜色 : 可 以 为 命名 颜色 .RGB 颜色 或 百分比 颜色 。 

。 inherit: 继承 父 级 样式 。 

在 HTML 中 大 多 数 元 素 都 可 以 设置 背景 颜色 ,例如 body .div ,td 等 ,transparent 属性 
用 于 设置 背景 透明 ,也 可 以 理解 为 没有 背景 颜色 。 


2. 设置 背景 图 像 
在 HTML 中 设置 网 页 背景 图 片 的 方式 为 二 body background 二 "图 片 URL" 二 ,在 CSS 
中 设置 背景 图 片 的 属性 为 background-image, 该 属性 不 仅 可 以 设置 网 页 背景 图 片 ,还 可 以 设 
置 表格 .单元 格 ,按钮 等 元 素 的 背景 图 片 。background-image 属性 的 语法 如 下 : 
background - image:none | url(url) | inherit 
说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
。 none: 无 背景 图 片 ,该 值 也 是 默认 值 。 
url(urD) : 图 片 的 url 地 址 ,可 以 是 绝对 地 址 也 可 以 是 相对 地 址 。 
inherit: 继承 父 级 样式 。 
3. 设置 固定 背景 图 像 


通常 ,在 网 页 上 设置 了 背景 图 片 之 后 ,背景 图 片 都 会 平 铺 在 网 页 的 下 方 , 若 网 页 内 容 比 
较 多 ,在 拖 动 滚动 条 时 ,网 页 的 背景 会 跟着 网 页 的 内 容 一 起 滚动 。 在 CSS 中 使 用 
background-attachment 属性 将 背景 图 片 固定 在 浏览 器 上 ,此 时 如 果 拖 动 滚动 条 ,背景 图 片 
不 会 随 着 网 页 内 容 滚 动 而 滚动 ,看 起 来 好 像 文字 浮动 在 图 片上 似 的 。background- 
attachment 属性 的 语法 如 下 : 

ground - attachment: scroll | fixed | inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 scroll: 背景 图 片 随 着 内 容 滚 动 ,该 值 为 默认 值 。 
fixed: 背景 图 片 固 定 ,不 随 着 内 容 滚动 。 
inherit: 继承 父 级 样式 。 


4. 设置 背景 图 像 的 平 铺 方 式 


在 HTML 中 ,如 果 背 景 图 片 大 小 小 于 浏览 器 窗口 大 小 ,浏览 器 会 自动 将 背景 图 片 平 
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铺 , 以 充满 整个 浏览 器 窗口 。 不 过 在 很 多 情况 下 ,这 种 方式 并 不 是 最 好 的 背景 图 片 展 现 方 
式 。 在 CSS 中 可 以 通过 background-repeat 属性 来 设置 背景 图 片 的 平 铺 方式 ,background- 
repeat 属性 的 语法 如 下 : 


background - repeat:repeat| no - repeat | repeat - x | repeat -了 | inherit 
说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 repeat: 平 铺 背 景 图 片 ,该 值 为 默认 值 。 

。 no-repeat: 不 平 铺 背 景 图 片 。 

。 repeat-x: 背景 图 片 在 水 平方 向 上 平 铺 。 

repeat-y: 背景 图 片 在 重 直 方向 上 平 铺 。 

inherit: 继承 父 级 样式 。 


5. 背景 图 像 的 定位 


在 默认 情况 下 ,背景 图 像 都 是 从 元 素 的 左上 角 开 始 显示 的 ,使 用 background-position 
属性 可 以 更 改 背景 图 像 开 始 显示 的 位 置 ,其 语法 如 下 : 
background - position: 位 置 的 具体 值 
在 这 里 设置 图 像 位 置 的 属性 值 有 多 种 形式 ,可 以 是 X.Y 轴 方 向 的 百分比 或 绝对 值 ,也 
可 以 使 用 表示 位 置 的 英文 名 称 , 具 体 取 值 及 其 含义 见 表 12-7。 
表 12-7 设置 背景 图 像 的 位 置 
取 值 方式 具体 含义 


百分比 (X%Y%) ”起 始 位 置 与 左上 角 的 距离 占 整个 元 素 的 比例 ,包括 水 平方 向 和 垂直 方向 。 例 如 设 
置 网 页 的 背景 图 像 , 则 会 以 整个 页 面 的 大 小 为 依据 
绝对 数值 (x,y) 起 始 位 置 的 绝对 坐标 ,包括 横 坐 标 和 纵 坐标 ,这 是 以 左上 角 为 端点 的 ,在 使 用 这 种 


格式 的 时 候 需 要 同时 设置 长 度 单位 
top 使 图 像 在 垂直 方向 上 居于 项 端 
bottom 使 图 像 在 垂直 方向 上 居于 底部 
left 使 图 像 在 水 平方 向 上 居于 左 端 
right 使 图 像 在 水 平方 向 上 居于 右 端 
center 图 像 在 中 部 显示 , 它 可 以 设置 为 水 平方 向 ,也 可 以 设置 为 垂直 方向 


在 这 些 设置 方式 中 ,百分比 和 绝对 数值 可 以 混用 , 即 前 面 是 百分比 ,后 面 可 以 是 数值 ; 
同样 前 面 是 数值 ,后 面 可 以 是 百分比 。 


12.4.2 设置 边框 


表格 的 边框 很 容易 理解 ,其 实在 HTML 中 很 多 对 象 都 是 有 边框 的 ,例如 div、input 等 。 
在 HTML 中 ,这 些 元 素 的 边框 都 是 很 呆板 的 ,甚至 有 些 元 素 显示 不 了 边框 ,在 有 了 CSS 之 
后 ,网 页 开发 者 就 可 以 很 轻松 地 设置 边框 的 样式 了 ,例如 边框 的 粗细 、 颜 色 等 。 


1. 设置 边框 样式 
边框 的 样式 在 边框 的 几 个 属性 里 可 以 说 是 最 重要 的 ,边框 样式 除了 可 以 改变 HTML 
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中 果 板 的 边框 样式 之 外 ,在 某 些 时 候 甚 至 可 以 控制 边框 是 否 显 示 。 在 CSS 中 设置 边框 样式 
的 属性 为 border-style, 该 属性 的 语法 如 下 : 
border - style: 边 框 的 样式 值 
说 明 : 边框 样式 的 具体 取 值 见 表 12-8。 
表 12-8 边框 的 样式 值 


属 性 值 具体 含义 

none 无 边框 

solid 实 线 的 效果 

dotted 点 线 效 果 , 即 边框 由 点 组 成 
dashed 划 线 效果 , 即 边框 由 多 个 短线 组 成 
double 双 实 线 效 果 

groove 带 立 体 效 果 的 沟 模 

ridge 突出 的 疹 形 效果 

inset 内 嵌 一 个 立体 的 边框 

outset 外 赃 一 个 立体 的 边框 


2. 设置 不 同 的 边框 样式 


使 用 border-style 属性 也 可 以 为 对 象 的 4 个 边框 设置 不 同 的 样式 ,其 设置 方法 与 
border-width 属性 类 似 , 可 以 直接 使 用 border-style 属性 设置 4 个 边框 的 风格 ,它们 对 应 的 
边框 依次 是 上 边框 ,右边 框 \ 下 边框 和 左边 框 ,如 果 这 里 只 设置 了 一 个 边框 风格 , 则 会 对 4 个 
边框 同时 起 作用 ; 如 果 设置 了 两 个 , 则 第 1 个 值 应 用 于 上 、 下 边框 ,第 2 个 值 应 用 于 左右 边 
框 ; 如 果 设 置 3 个 ,第 1 个 用 于 上 边框 ,第 2 个 用 于 左右 边框 ,第 3 个 用 于 下 边框 。 


3. 设置 边框 宽度 


在 HTML 中 table 元 素 可 以 使 用 border 属性 来 设置 边框 的 宽度 ,在 CSS 中 可 以 使 用 
border-width 属性 来 设置 边框 宽度 ,但 是 border-width 属性 不 仅 可 以 设置 表格 的 边框 宽度 ， 
还 可 以 设置 任何 一 个 有 边框 的 对 象 的 边框 宽度 ,border-width 属性 的 语法 如 下 : 

border - width:medium | thin | thick | 数值 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 medium: 默认 宽度 ,该 值 为 默认 值 。 

。 thin: 比 默认 宽度 小 。 

thick: 比 默认 宽度 大 。 

。 数值 : 以 绝对 单位 数值 或 相对 单位 数值 来 指定 边框 的 宽度 。 


4. 设置 不 同 的 边框 宽度 


使 用 border-width 属性 不 仅 可 以 设置 整个 边框 宽 度 , 还 可 以 设置 单个 边框 的 宽度 ,用 
法 和 设置 边框 样式 一 样 , 如 果 这 里 只 设置 了 一 个 边框 宽度 , 则 会 对 4 个 边框 同时 起 作用 ; 如 
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果 设 置 了 两 个 边框 宽度 , 则 第 1 个 值 应 用 于 上 、 下 边框 ,第 2 个 值 应 用 于 左 、 右 边框 ; 如 果 提 
供 3 个 边框 宽度 ,第 1 个 用 于 上 边框 ,第 2 个 用 于 左 、 右 边框 ,第 3 个 用 于 下 边框 。 
5. 设置 边框 的 颜色 


border-color 属性 不 仅 可 以 为 表格 设置 边框 颜色 ,还 可 以 为 几乎 所 有 的 块 对 象 添 加 边框 
颜色 ,例如 p、div 等 元 素 ,border-color 属性 的 语法 如 下 : 


border - color: 颜 色 | transparent 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
。 颜色 : 边框 的 颜色 ,可 以 是 颜色 英文 名 .RGB 颜色 或 用 百分比 表示 颜色 。 
» transparent : 透明 颜色 , 即 不 设置 颜色 。 


6. 设置 不 同 的 边框 颜色 


使 用 border-color 属性 不 仅 可 以 统一 设置 4 个 边框 的 颜色 ,还 可 以 设置 单个 边框 的 颜 
色 ,其 设置 方法 与 border-width 属性 和 border-style 属性 类 似 。 


7. 综合 设置 边框 效果 

在 CSS 中 还 可 以 使 用 border 属性 直接 设置 边框 的 整体 效果 ,其 语法 如 下 ; 

border: 边框 宽度 ”边框 样式 ”边框 颜色 

在 这 里 ,可 以 只 设置 其 中 的 一 项 或 几 项 ,但 如 果 要 正常 显示 设置 的 边框 效果 ,需要 设置 
边框 的 样式 ,即使 是 采用 默认 的 solid。 

12.4.3 设置 边 距 


边 距 和 补 白 都 是 为 控制 页 面 的 松紧 程度 而 提供 的 属性 , 边 距 一 般 是 设置 元 素 周围 的 边 
界 宽度 ,这 个 宽度 可 以 明显 地 区 分 不 同 的 元 素 ,也 可 以 让 网 页 中 的 内 容 没有 那么 拥挤 。 


1. 设置 上 边 距 


在 CSS 中 可 以 为 一 个 元 素 设 置 各 个 方向 的 边界 宽度 。 上 边 距 指 元 素 与 它 上 面 的 元 素 
之 间 的 距离 ,采用 的 是 margin-top 属性 ,其 设置 语法 如 下 : 


margin - top: 距离 值 


说 明 : 这 里 的 距离 值 可 以 是 百分比 ,也 可 以 是 由 数值 和 单位 组 成 的 确定 的 距离 ,如 果 只 
给 出 一 个 数值 , 则 默认 其 单位 是 像素 ,百分比 是 以 该 元 素 的 上 一 级 元 素 为 基础 进行 设置 的 。 


2. 设置 下 边 距 
下 边 距 和 上 边 距 相对 , 指 元 素 距 离 下 方 元素 的 边 距 值 , 其 语法 如 下 : 
margin - bottom: 距离 值 


说 明 : 这 里 的 距离 值 可 以 是 百分比 ,也 可 以 是 由 数值 和 单位 组 成 的 确定 的 距离 ,如 果 只 
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给 出 一 个 数值 , 则 默认 其 单位 是 像素 。 
3. 设置 左边 距 
左边 距 就 是 元 素 距离 左 侧 其 他 元 素 的 距离 ,其 语法 如 下 : 
margin - left: 距 离 值 


说 明 : 这 里 的 距离 值 可 以 是 百分比 ,也 可 以 是 由 数值 和 单位 组 成 的 确定 的 距离 ,如 果 只 
给 出 一 个 数值 , 则 默认 其 单位 是 像素 。 


4. 设置 右边 距 
右边 距 就 是 元 素 距离 右 侧 其 他 元 素 的 距离 ,其 语法 如 下 : 
margin - right: 距 离 值 


说 明 : 这 里 的 距离 值 可 以 是 百分比 ,也 可 以 是 由 数值 和 单位 组 成 的 确定 的 距离 ,如 果 只 
给 出 一 个 数值 , 则 默认 其 单位 是 像素 。 


5. 综合 设置 边 距 


如 果 要 同时 设置 某 个 元 素 的 4 个 边 距 ,除了 可 以 分 别 进行 设置 外 ,还 可 以 使 用 复合 属性 
margin 进行 设置 ,其 语法 如 下 : 

margin: 各 个 边 距 的 值 

说 明 : 在 这 里 可 以 设置 1 一 4 个 边 距 。 如 果 设 置 一 个 值 , 则 同时 作用 于 元 素 的 4 个 方 
向 ; 如 果 设 置 两 个 值 , 则 分 别 作 用 于 上 下 和 左右 边 距 ; 如 果 设 置 3 个 值 , 则 分 别 作用 于 上 边 
距 左右 边 距 和 下 边 距 ; 如 果 设置 4 个 值 , 则 按照 上 \ 右 、 下 \ 左 的 顺序 起 作用 。 

12.4.4 设置 补 白 


补 白 用 于 设置 元 素 边框 和 内 容 之 间 的 距离 ,是 设置 元 素 自身 松紧 程度 的 属性 ,可 以 理解 
为 在 盒子 里 增加 填充 物 ,以 避免 里 面 的 东西 被 打破 。 


1. 设置 顶端 补 和 白 


顶端 补 白 指 元 素 的 内 容 与 其 上 边框 的 距离 ,常用 来 设置 页 面 补 白 , 其 语法 如 下 : 
padding - top: 距离 值 


说 明 : 这 里 的 距离 值 一 般 采 用 数值 ,可 以 为 其 添加 单位 ; 如 果 没 有 设置 单位 ,默认 以 像 
素 为 单位 。 


2. 设置 底部 补 白 
底部 补 白 就 是 设置 页 面 元 素 距离 下 边框 的 距离 ,其 语法 如 下 : 


padding - bottom: 距离 值 
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说 明 : 这 里 的 距离 值 一 般 采 用 数值 ,可 以 为 其 添加 单位 ; 如 果 没 有 设置 单位 ,默认 以 像 
素 为 单位 。 


3. 设置 左 侧 补 和 白 


设置 左 侧 补 白 指 设置 页 面 中 元 素 与 左 侧 边界 之 间 的 间隔 ,其 语法 如 下 : 

padding - left: 距 离 值 

说 明 : 这 里 的 距离 值 一 般 采 用 数值 ,可 以 为 其 添加 单位 ; 如 果 没 有 设置 单位 ,默认 以 像 
素 为 单位 。 

4. 设置 右 侧 补 白 

设置 右 侧 补 白 指 设置 页 面 中 元 素 与 右 侧 边界 之 间 的 间隔 ,其 语法 如 下 : 

padding - right: 距离 值 

说 明 : 这 里 的 距离 值 一 般 采 用 数值 ,可 以 为 其 添加 单位 ; 如 果 没 有 设置 单位 ,默认 以 像 

5. 综合 设置 补 白 

如 果 要 同时 设置 某 个 元 素 的 4 个 补 白 ,除了 可 以 分 别 进行 设置 外 ,还 可 以 使 用 复合 属性 
padding 进行 设置 ,其 语法 如 下 : 

padding: 各 个 方向 的 补 白 

说 明 : 在 这 里 可 以 设置 1 一 4 个 补 白 值 。 如 果 设 置 一 个 值 , 则 同时 作用 于 4 个 方向 ; 如 


果 设 置 两 个 值 , 则 分 别 作 用 于 上 下 和 左右 方向 ; 如 果 设 置 3 个 值 , 则 分 别 作用 于 顶端 补 白 、 
左右 补 白 和 底部 补 白 ; 如 果 设置 4 个 值 , 则 按照 上 \ 右 、 下 \ 左 的 顺序 起 作用 。 


(12.5 控制 元 素 布 局 

A 
CSS 可 以 用 来 控制 元 素 的 布局 ,通过 对 DIV 的 位 置 进行 设置 来 定位 网 页 元 素 。 
12.5.1 块 级 元 素 和 内 联 元 素 


1. 块 级 元 素 和 内 联 元 素 的 概念 


块 级 元 素 生成 的 是 一 个 矩形 框 , 并 且 和 相 邻 的 块 级 元 素 依次 竖 直 排列 ,不 会 排 在 同一 
行 。 例 如 二 p 二 元素、 二 ul 二 元 素 、 二 hi> 元 素 、 二 form 元 素 等 都 是 块 级 元 素 , 它 们 总 是 以 
一 个 块 出 现 ,总 是 单独 占据 一 行 。 

内 联 元 素 通俗 来 说 就 是 文本 的 显示 方式 ,读者 常用 到 的 二 a 二 二 img 记 、 二 input 记 都 属 
于 内 联 元 素 , 内 联 元 素 的 显示 特点 就 是 像 文本 一 样 显示 ,各 个 元 素 之 间 横 向 排列 ,到 最 右 端 
自动 换行 ,不 会 独自 占据 一 行 。 当 然 , 块 级 元 素 也 能 变 成 内 联 元 素 , 这 就 要 用 到 下 面 所 讲 的 
定位 和 浮动 了 。 
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2. 二 div 二 元 素 和 二 span 一 元 素 


为 了 更 好 地 理解 块 级 元 素 和 内 联 元 素 , 这 里 重点 介绍 CSS 布局 中 经 常 使 用 的 一 div 之 元 
素 和 二 span 记 元 素 ,利用 这 两 个 元 素 ,加 上 CSS 对 其 样式 的 设计 ,可 以 很 方便 地 实现 各 种 
效果 。 

1) <<div 之 元 素 

到 div 二 元 素 简 单 而 言 就 是 一 个 独立 的 对 象 , 它 是 一 个 标准 的 块 级 元 素 , 用 它 可 以 容纳 
各 种 元 素 , 从 而 方便 排版 ,在 用 CSS 设置 样式 时 只 需要 对 过 div 之 进行 相应 的 控制 ,其 中 包含 
的 各 个 元 素 都 会 随 之 改变 。 志 div 之 元 素 的 语法 如 下 : 

<div> 

各 种 元 素 或 文字 

</div> 

2) 二 span 二 元 素 

去 span> 元 素 和 过 div 之 元 素 一 样 ,作为 容器 标记 被 广泛 应 用 在 HTML 语言 中 ,在 
所 span 之 和 去 /span 二 之 间 同 样 可 以 容纳 各 种 HTML 元 素 , 从 而 形成 独立 的 对 象 。 志 span 盖 
元 素 和 一 div 之 元 素 的 区 别 在 于 一 div 之 元 素 是 一 个 块 级 元 素 , 它 包 围 的 元 素 会 自动 换行 ; 而 
二 span 记 元 素 是 一 个 内 联 元 素 , 它 包围 的 元 素 不 会 自动 换行 ,二 span 二 元 素 没有 结构 上 的 意 
义 ,纯粹 是 为 了 应 用 样式 , 当 其 他 内 联 元 素 都 不 合适 时 ,就 可 以 使 用 二 span 一 元 素 。 二 span 二 
元 素 的 语法 如 下 : 

<span> 

各 种 元 素 或 文字 

</span> 


12.5.2 定位 


CSS 中 的 网 页 布局 使 用 的 都 是 块 形式 ,而 块 出 现在 网 页 中 的 哪个 位 置 所 采用 的 是 定位 
的 模式 ,定位 (positioning) 就 是 允许 网 页 开发 者 精确 定义 元 素 出 现 的 相对 位 置 ,这 个 相对 位 
置 可 以 是 相对 父 级 元 素 . 另 一 个 元 素 或 浏览 器 窗口 。 
1. 定位 模式 
在 CSS 中 可 以 使 用 position 属性 设置 定位 的 模式 ,position 属性 的 语法 如 下 : 
Position: static | relative | absolute | inherit 
说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
。 static: 静态 定位 模式 , 即 无 特殊 定位 。 块 以 普通 方式 生成 , 块 级 元 素 生 成 的 是 一 个 
和 矩形 框 ,是 文档 流 中 的 一 个 部 分 ,而 内 联 级 框 是 由 一 个 或 多 个 行 框 的 上 下 文生 成 的 。 
这 些 行 框 流 动 于 父 级 元 素 中 ,该 值 为 默认 值 。 
。 relative: 一 个 相对 定位 模式 ,使 用 该 模式 的 块 可 以 偏 移 一 定 的 距离 , 块 偏 移 的 方向 
和 幅度 可 以 由 top、left、right 和 bottom 几 个 偏 移 属性 联合 指定 ,其 产生 过 程 是 先 用 
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static 方式 生成 一 个 块 , 再 移动 这 个 块 到 指定 的 相对 位 置 。 

absolute: 这 是 一 个 绝对 定位 模式 ,同样 也 是 使 用 top、left、right 和 bottom 几 个 属性 
来 决定 块 的 位 置 。 

inherit: 继承 父 级 样式 。 


2. 偏 移 


在 定位 模式 中 ,relative、absolute 和 static 都 需要 使 用 偏 移 属 性 来 指定 定位 的 位 置 。 在 
CSS 中 , 偏 移 量 有 4 个 属性 , 即 left\right、top 和 bottom, 分 别 代表 左 偏 移 量 、 布 偏 移 量 、 上 
偏 移 量 和 下 偏 移 量 。 其 语法 如 下 : 

left: 长 度 | 百 分 比 | auto | inherit 

right: 长 度 | 百分比 | auto | inherit 

top: 长 度 | 百分比 | auto | inherit 

bottom: 长 度 | 百 分 比 | auto | inherit 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 长 度 : 可 以 是 绝对 单位 数值 ,也 可 以 是 相对 单位 数值 ,用 于 指明 偏 移 的 幅度 。 

。 百分比 : 以 百分比 的 形式 指定 偏 移 幅度 ,这 个 百分比 为 父 级 元 素 的 宽度 和 高 度 的 百 

分 比 。 

。 anuto: 无 特定 的 偏 移 量 , 由 浏览 器 自己 分 配 , 该 值 为 默认 值 。 

。 inherit: 继承 父 级 样式 。 

当 一 个 元 素 被 设置 了 偏 移 之 后 ,这 个 元 素 的 所 有 部 分 都 会 跟着 一 起 偏 移 ,如 边框 , 边 距 、 
填充 等 , 偏 移 量 不 仅 可 以 为 正 值 ,还 可 以 为 负 值 。 


3. 综合 运用 


在 学 习 了 定位 和 偏 移 之 后 ,大 家 知道 了 定位 有 4 种 不 同 的 模式 ,下 面 结合 偏 移 分 别 介绍 
这 几 种 模式 的 不 同 之 处 。 

1) 静态 定位 

静态 定位 模式 是 定位 模式 中 的 默认 定位 模式 。 在 该 模式 中 对 定位 没有 任何 要 求 ,完全 
是 由 浏览 器 自动 生成 。 对 于 块 级 元 素来 说 ,通常 是 生成 一 个 矩形 框 , 如 div 层 等 ; 对 于 内 联 
元 素来 说 , 则 按 正常 的 流 生 成 ,如 b 元 素 等 。 

将 元 素 的 position 属性 值 设 为 static 可 以 设置 元 素 的 静态 定位 ,由 于 静态 定位 模式 并 
没有 对 元 素 在 定位 方面 指出 任何 要 求 ,因此 所 有 的 偏 移 属性 在 该 模式 下 都 是 不 起 作用 的 。 

2) 绝对 定位 

绝对 定位 是 相对 于 父 级 元 素 的 4 个 边框 而 言 的 ,通常 可 以 把 整个 网 页 (或 者 说 是 body 
元 素 ) 看 成 一 张 纸 ,而 绝对 定位 就 是 将 块 放 在 网 页 的 某 个 位 置 。 至 于 具体 将 块 放 在 网 页 的 哪 
个 位 置 ,由 偏 移 量 决定 ,将 元 素 的 position 属性 值 设 为 absolute 就 可 以 设置 元 素 的 绝对 
定位 。 

3) 相对 定位 

如 果 说 绝对 定位 是 相对 网 页 的 定位 ,那么 相对 定位 就 是 相对 元 素 自己 的 定位 。 所 谓 相 
对 元 素 自己 的 定位 是 指 元 素 相 对 于 没有 设置 position 属性 之 前 的 位 置 。 将 元 素 的 position 


245 


RA 


246 


MV 


Web 前 端 开发 及 应 用 教程 


属性 值 设 为 relative 可 以 设置 元 素 的 相对 定位 。 
4. 定位 元 素 的 层 又 次序 


当 一 个 页 面 内 有 多 个 层 的 时 候 就 需要 设置 这 些 层 的 层 释 顺序 ,这 样 才 不 会 将 页 面 中 需 
要 显示 的 内 容 谈 挡住。 在 一 般 情况 下 , 越 晚 添加 的 层 , 位 置 越 靠 上 。 设 置 层 肥 顺序 的 语法 
如 下 : 

z- index: 顺 序号 

在 这 里 , 层 释 顺序 是 通过 设置 其 所 在 的 层 顺序 号 来 实现 的 。 在 一 般 情 况 下 , 取 值 为 1 表 
示 该 层 位 于 最 上 层 , 也 就 是 没有 其 他 层 覆 盖 该 层 。 通 常 ,顺序 号 越 大 , 层 越 靠 下 ,被 覆盖 的 几 
率 也 就 越 大 。 


12.5.3 浮动 
在 一 个 网 页 文档 里 ,文档 流通 常 是 从 上 到 下 、 由 左 而 右 流动 的 。 对 于 内 联 元 素 而 言 , 在 


创建 了 一 个 元 素 之 后 会 在 其 右 接 着 创建 其 他 元 素 ; 对 于 块 级 元 素 而 言 ,在 创建 了 一 个 元 素 
之 后 会 在 其 下 方 接着 创建 其 他 元 素 ,CSS 中 的 浮动 可 以 让 某 些 元 素 脱离 这 种 文档 流 的 方式 。 

1. 浮动 的 概念 

读者 对 于 浮动 的 概念 应 该 不 会 太 陌生 ,在 介绍 图 片 和 表格 时 曾 介 绍 过 图 片 和 表格 的 对 
齐 方式 ,这 种 对 齐 方式 其 实 就 是 “浮动 >。 例如 ,一 img src 二 "a. jpg" align 王 "right" 二 ”会 让 
图 片 向 右 方 浮动 ,并 且 其 他 元 素 都 会 围绕 着 图 片 “流动 "。 在 HTML 中 只 有 图 片 和 表格 可 
以 浮动 ,而 使 用 CSS 可 以 让 所 有 元 素 都 浮动 起 来 。 

2. 设置 浮动 

在 CSS 中 使 元 素 浮动 的 属性 为 float, 其 语法 如 下 : 

float: left | right | none 

说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 left: 对 象 居 左 浮动 ,文本 流向 对 象 的 右 侧 。 

。 right: 对 象 居 右 浮动 ,文本 流向 对 象 的 左 侧 。 

。 none: 对 象 不 浮动 ,该 值 为 默认 值 。 

3. 清除 浮动 

在 一 个 元 素 被 设 为 浮动 之 后 ,如 果 没 有 特别 要 求 , 这 个 元 素 之 后 的 所 有 内 容 都 会 围绕 该 
元 素 流动 ,此 时 需要 清除 图 片 的 浮动 。 在 CSS 中 可 以 使 用 clear 属性 清除 浮动 效果 ,其 语法 
如 下 : 

clear:none | left | right| both 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
。 none: 不 清除 浮动 ,该 值 为 默认 值 。 
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。 left: 不 允许 左边 有 浮动 的 元 素 。 
。 right: 不 允许 右边 有 浮动 的 元 素 。 
。 both: 左 \ 右 两 侧 都 不 允许 有 浮动 的 元 素 。 


12.5.4 滋 出 与 剪 切 


当 一 个 元 素 的 大 小 无 法 容纳 其 中 的 内 容 时 就 会 产生 溢出 的 情况 ,也 就 是 元 素 中 的 内 容 
已 经 显示 在 元 素 外 面 了 ,而 剪 切 的 作用 是 只 显示 元 素 中 的 某 一 部 分 ,把 其 余部 分 都 剪 切 掉 。 


1. 溢出 内 容 的 设置 
在 CSS 中 可 以 通过 overflow 属性 处 理 洪 出 情况 。overflow 属性 的 语法 如 下 : 


overflow: visible | hidden | scroll | auto | inherit 


说 明 : 以 上 代码 的 属性 所 代表 的 含义 如 下 。 

。 visible: 不 剪 切 溢出 的 内 容 , 也 不 添加 滚动 条 。 对 于 下 浏览 器 来 说 ,会 自动 调整 对 
象 大 小 ,以 容纳 其 中 内 容 , 对 于 其 他 三 大 浏览 器 来 说 ,会 让 溢出 的 内 容 显示 在 对 象 之 
外 。 该 值 为 默认 值 。 

。 hidden: 隐藏 洲 出 的 内 容 , 用 户 将 看 不 到 溢出 部 分 的 内 容 。 

scroll: 添加 横向 与 纵向 滚动 条 ,用 户 可 以 通过 拖 动 滚动 条 来 查看 溢出 部 分 的 内 容 。 

auto: 浏览 器 决定 使 用 哪个 方法 处 理 溢出 的 内 容 , 通 常 在 必要 的 时 候 显示 滚动 条 。 


2. 设置 水 平方 向 超出 范围 时 的 处 理 方式 


使 用 overflow 属性 可 以 设置 超出 范围 时 的 内 容 处 理 方式 ,但 是 一 旦 设置 了 , 则 对 水 平 
方向 和 垂直 方向 同时 起 作用 ,如 果 只 需要 设置 其 中 一 个 方向 ,可 以 单独 进行 设置 。 使 用 
overflow-x 可 以 设置 水 平方 向 上 的 处 理 方式 ,其 语法 如 下 : 


overflow - x:visible | auto | hidden | scroll 


说 明 : 

。 visible: 表示 可 见 ,即使 内 容 超 出 了 范围 依然 完整 显示 。 

。 auto: 表示 自动 根据 情况 显示 滚动 条 。 

。 hidden: 表示 裁 切 超出 范围 的 内 容 。 

。 scroll: 表示 显示 滚动 条 。 

3. 设置 垂直 方向 超出 范围 时 的 处 理 方式 

使 用 overflow-y 可 以 设置 当 内 容 超 出 元 素 的 范围 时 在 垂直 方向 上 的 处 理 方式 ,其 设置 
语法 如 下 : 

overflow - Y: visible | auto | hidden | scroll 

说 明 

。 visible: 表示 可 见 ,即使 内 容 超 出 了 范围 依然 完整 显示 。 

。 auto: 表示 自动 根据 情况 显示 滚动 条 。 
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。 hidden: 表示 裁 切 超出 范围 的 内 容 。 
。 scroll: 表示 显示 滚动 条 。 


4. 内 容 的 剪 切 


在 CSS 中 可 以 使 用 clip 属性 剪 切 对 象 ,所 谓 “ 剪 切 ” 只 是 在 对 象 上 划分 一 个 矩形 的 
域 ,属于 该 区 域 中 的 部 分 显示 出 来 ,不 属于 该 区 域 的 部 分 则 隐藏 。clip 属性 的 语法 如 下 : 


Ea 


clip 属性 :auto | rect( 上 右 下 左 ) | inherit 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 

。 auto: 不 剪 切 ,该 值 为 默认 值 。 

rect: 根据 上 、 右 、 下 、 左 的 次 序 划分 一 个 区 域 ,属于 该 区 域内 的 部 分 显示 ,不 属于 该 
区 域内 的 部 分 则 隐藏 ,rect 的 4 个 参数 分 别 代 表 上 、 右 、 下 、 左 4 个 边 距 。 需 要 注意 
的 是 ,这 4 个 边 距 并 不 是 指 与 上 边框 、 右 边框、 下 边框 .左边 框 之 间 的 距离 ,而 是 相对 
该 对 象 的 左上 和 角 坐标 而 言 的 距离 。 


12.5.5 对象 的 显示 与 隐藏 


对 于 形状 对 象 而 言 ,除了 可 以 设置 溢出 与 剪 切 之 外 ,还 可 以 对 整个 块 设 置 显示 或 隐藏 。 
显示 、 隐 藏 与 溢出 、 前 切 不 同 ,溢出 与 剪 切 所 影响 的 只 是 对 象 的 局 部 (当然 也 可 以 将 局 部 扩大 
到 全 部 ), 而 显示 与 隐藏 影响 的 是 整个 对 象 。 在 CSS 中 可 以 使 用 visibility( 可 见 性 ) 设 置 对 
象 是 否 可 见 。visibility 属性 的 语法 如 下 : 


visibility:visible | hidden 


说 明 : 以 上 代码 的 属性 值 所 代表 的 含义 如 下 。 
。 visible: 对 象 为 可 见 的 。 
。 hidden: 对 象 为 不 可 见 的 。 


(12,6 综合 应 用 


12.6.1 登录 界面 


利用 HTML 十 CSS 制作 管理 系统 的 用 户 登录 界面 ,使 用 CSS 文档 布局 并 设置 样式 。 
(1) CSS 文档 loginstyle. css: 


body 

{font - size: small; 
background ~ image: url( 'bg. jpg'); 
margin: auto; 
background - repeat: repeat — x; 
text - align: center; 

} 


#main 
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MY 


{margin: auto; 
width: 900px; 
text ~ align: center; 
} 
#Logo 
{margin: auto; 
background — image: url('task banner. gif'); 
background — repeat: no — repeat; 
height: 110px; 
width: 884px; 
' 
#LoginMain 
{margin: auto; 
background — image: url('userLoginBg. jpg'); 
background - repeat: no— repeat; 
height: 300px; 
position: relative; 
top: Opx; 
left: Opx; 
; 
#Login Table 
{position: absolute; 
top: 120px; 
left: 219px; 
height: 77px; 
width: 394px; 
Color: #FFFFFF; 
bottom: 103px; 
} 
.btn 
{background — image:url( 'btn. jpg'); 
height :72px; 
width: 90px; 
} 


(2) 登录 页 面 的 HTML 代码 (login. html) : 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
<html xmlns = "http://www. w3. org/1999/xhtml"> 


< head runat = " server"> 
<title> 登 录 界 面 </title> 
< link href = "loginstyle. css" rel = "stylesheet" type = "text/css" /> 

</head> 

<body> <div id= "main"> <div id 


Logo"></div> <div id= "LoginMain"> 
<form id= "forml" runat = "server"> 
<div id= "Login Table"> 
<table> 
<tr> 
<td> 用 户 名 : </td> 
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<td>< input type = "text" id= "usename" /></td> 
< td rowspan= "3" colspan = "3"> 
< input type = "button" name = "sm" class = "btn" /> 
</td> 
</tr> 
<tr> 
< td> 密 码 : </td> 
<td>< input type = "password" id= "password" /></td> 
</tr> 
<tr> 
< td> 验 证 码 : </td> 
<td>< input type= "text" id= "invcode" /></td> 
</tr> 
</table> 
</div> 
</form> 
</div> </div></body></html > 


(3) 代码 在 浏览 器 中 运行 的 效果 如 图 12-1 所 示 。 


图 12-1 用 户 登录 界面 的 运行 效果 


12.6.2 花 店 Banner 


利用 HTML 十 CSS 制作 花 店 的 Banner, 使 用 CSS 文档 布局 并 设置 样式 。 
(1) CSS 文档 css. css: 


body{font - family:" 微 软 雅 黑 "; font - size:14px; color: #F34;} 


body,pvul, 1i, h4, img{margin:0; padding:0; border:0; list— style:none;} 
.banner{ 

width:1000px; 

height :285px; 

margin:13px auto 15px auto; 


overflow: hidden; 

} 

.left{ 

width:755px; 

height :285px; 

font - weight :bold; 
background:url(pic. gif); 
position:relative; 
float:left; 

} 

.Content left{ 
position:absolute; 
top:90px; 
right:45px; 

text — align:right; 

} 

.school_en{ 

font - size:14px; 

} 

.school ch{ 

font — size:24px; 
font - family:" 黑 体 "; 
padding — right:10px; 
} 

.advertise{ 

margin — top:20px; 
font - family:" 黑 体 "; 
font - size:16px; 

} 

ul. style_a{ 

margin — top:25px; 
margin— left:120px; 
list— style:none; 
overflow: hidden; 

} 

ul. style a li{ 
float:left; 

margin— left:10px; 

} 

ul.style a liaf 
background: # FFF; 
border:1px solid #ff7202; 
width:26px; 

height :22px; 

text ~ align:center; 
line ~ height :22px; 
vertical — align:middle; 
display:block; 

color: # ff7202; 

font - size:18px; 
text — decoration: none; 
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} 

ul. style a li.current af 
width:30px; 

height :26px; 

line — height :26px; 
background: # ff7202; 
Color: # FEFF; 


margin 一 top: — 2px; 
position:relative; 
} 

.right{ 


width:245px; 
height:285px; 
background: # fefOdf; 
float:right; 
position: relative; 

} 

.aa{ 

font - size: 16px; 

} 

.bb { 

color: #000; 

text - decoration: line— through; 


} 


.Content right{ 
position: absolute; 
top: 50px; 

left: 30px; 

height: 141px; 

} 

ul. style_icon{ 
margin— top:10px; 

} 

ul. style_icon 1i{ 
float:left; 
margin— right:12px; 
} 

“el( 

clear :both; 

margin — top:55px; 
margin — right :30px; 
text — indent :2em; 
line - height :24px; 
} 


(2) Banner 的 HTML 文件 12. 6. 2. html: 


<! DOCTYPE html PUBLIC " ~ //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 

< html xmlns = "http://www.w3. org/1999/xhtml"> 

<head> 

<meta http - equiv = "Content — Type" content = "text/html; charset = utf — 8" /> 

<title> 我 的 花 店 </title> 


< link rel = "stylesheet" href = "css.css" type= "text/css" /> 
</head> 


<body> 

<div class = "banner"> 

<! —— left begin -一 > 

<div class = "left"> 
<div class = "content left"> 

<p class = "school en"> FOR MY LOVER </p> 
<p class = "school en"> gnbsp;</p> 
<p class = "school_ch"> 真 情 永久 </p> 
<p class = "advertise"> 愿 我 们 之 间 真 情 永久 </p> 


<ul class = "style_a"> 


urrent"><a href 
<li><a href ="#">2</a></li> 
<1li><a href ="#">3</a></li> 
<1li><a href ="#">4</a></li> 
</ul> 
</div> 
</div> 
<! -— left end 一 一 > 
<! -— right begin -一 > 
<div class = "right"> 
<div class = "content_right"> 
< h4 > gnbsp;</h4 > 
< h4 > gnbsp;</h4> 


<1i class 


#">1</a></li> 


第 12 章 CSS 与 DIV 


<h4 > 红 康 乃 声 9 枝 ,香槟 玫瑰 12 枝 , 配 草 内 衬 白色 手 揉 纸 , 外 朱红 色 手 揉 纸 , 朱 红色 蝴蝶 结 


</h4 > 
<p> gnbsp;</p> 
<p class = "bb"> 原 价 :188 </p> 
<p> gnbsp;</p> 
<p class = "aa"> 现 价 :168 </p> 
</div> 
</div> 
<! -— right end 一 一 > 
</div> 
</body> 
</html > 


(3) 代码 在 浏览 器 中 运行 的 效果 如 图 12-2 所 示 。 


FORMY LOVER 


真情 永久 
压 我 们 之 间 走 情 永 久 


国 [2][3]L4] 


图 12-2 花 店 Banner 的 运行 效果 


红 康 甩 叔 9 梳理 榨 玫 现 12 梳 配 草 
内 村 白色 手 控 纸 ,外 朱红 色 手 捞 纸 , 
朱红 色 铺 峰 结 

ae 


现价 :168 
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本 章 学 习 目 标 : 

名 了 解 JavaScript 的 基础 知识 及 语法 规则 。 
名 能 够 熟练 使 用 JavaScript 编写 程序 。 

避 掌 握 JavaScript 中 的 事件 和 对 象 。 


(13,1 JavaScript 基础 


JavaScript 是 世界 上 最 流行 的 编程 语言 ,这 门 语言 可 用 于 HTML 和 Web, 更 可 广泛 用 
于 服务 器 .PC、 笔 记 本 电脑 ,平板 电脑 和 智能 手机 等 设备 。 


13.1.1 JavaScript 概述 


JavaScript 是 一 种 基于 对 象 (Objectrbased) 和 事件 驱动 (Event-Driven) 并 具有 安全 性 能 
的 脚本 语言 ,使 用 它 的 目的 是 与 HTML 超 文 本 标记 语言 .Java 脚本 语言 (Java 小 程序 ) 一 起 
实现 在 一 个 Web 页 面 中 链接 多 个 对 象 ,与 Web 客户 交互 ,从 而 可 以 开发 客户 端的 应 用 程序 
等 。 它 是 通过 和 骨 入 或 调 人 在 标准 的 HTML 语言 中 实现 的 。 


1. 特点 


1) 一 种 脚本 编程 语言 

首先 要 解释 一 下 什么 是 脚本 语言 。 脚 本 语言 是 一 种 简单 的 程序 ,由 一 些 ASCII 字符 构 
成 , 它 直 接 利用 记事 本 等 文本 编辑 软件 就 可 以 开发 完成 ,并 且 事先 无 须 编译 ,只 要 利用 适当 
的 解释 器 就 可 以 翻译 并 执行 。 

JavaScript 是 一 种 脚本 语言 , 它 采 用 小 程序 段 的 方式 实现 编程 , 像 其 他 脚本 语言 一 样 ， 
JavaScript 同样 是 一 种 解释 性 语言 , 它 提 供 了 一 个 容易 的 开发 过 程 。 其 基本 结构 形式 与 C、 
C++、VB、Delphi 十 分 类 似 , 但 它 不 像 这 些 语 言 需要 先进 行 编译 然后 才能 执行 ,而 是 在 程序 
运行 过 程 中 被 逐 行 地 解释 执行 。 它 与 HTML 标识 结合 在 一 起 ,方便 了 用 户 的 使 用 。 

2) 基于 对 象 的 语言 

JavaScript 是 一 种 基于 对 象 的 语言 ,这 意味 着 它 能 运用 自己 创建 的 对 象 , 因 此 ,许多 功 
能 可 以 来 自 于 脚本 环境 中 对 象 方法 的 调用 。 
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3) 简单 性 

JavaScript 的 简单 性 首先 体现 在 它 是 一 种 基于 Java 基本 语句 和 控制 流 之 上 的 简单 且 紧 
凑 的 设计 ,从 而 对 于 学 习 Java 是 一 种 非常 好 的 过 渡 ; 其 次 它 的 变量 类 型 采用 弱 类 型 ,并 未 
使 用 严格 的 数据 类 型 。 

4) 安全 性 

JavaScript 是 一 种 安全 的 语言 , 它 不 允许 访问 本 地 的 硬盘 , 且 不 能 将 数据 存 和 人 到 服务 器 
上 ,不 允许 对 网 络 文档 进行 修改 和 删除 ,只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ,从 而 使 
得 对 数据 的 操作 安全 化 。 

5) 动态 性 

JavaScript 是 动态 的 , 它 可 以 直接 对 用 户 或 客户 的 输入 做 出 响应 ,无 须 经 过 Web 服务 程 
序 。 它 对 用 户 的 响应 是 采用 事件 驱动 的 方式 进行 的 。 所 谓 事件 驱动 ,是 指 在 页 面 中 执行 了 
某 种 操作 后 产生 相应 的 动作 ,例如 按 下 鼠标 、 移 动 窗口 .选择 菜单 等 都 可 以 视 为 事件 ,而 当 事 
件 发 生 后 可 能 会 引起 相应 的 事件 响应 。 

6) 跨 平台 性 

JavaScript 与 操作 环境 无 关 , 只 依赖 于 浏览 器 本 身 , 只 要 计算 机 安装 了 支持 JavaScript 
的 浏览 器 , 它 就 可 以 被 正确 执行 ,从 而 实现 了 * 编 写 一 次 , 走 遍 天 下 ”的 梦想 。 

综 上 所 述 ,JavaScript 是 一 种 描述 性 语言 , 它 可 以 被 嵌入 到 HTML 的 文件 之 中 。 它 可 
以 做 到 回应 使 用 者 的 需求 事件 (如 form 的 输入 ) ,而 不 用 任何 的 网 络 回 传 资料 ,所 以 当 一 位 
使 用 者 输入 一 项 资料 时 , 它 不 用 经 过 传 给 服务 端 (Server) 处 理 再 传 回来 的 过 程 ,而 直接 可 以 
被 客户 端 (Client) 的 应 用 程序 所 处 理 。 


2. JavaScript 可 以 用 来 做 什么 


JavaScript 虽然 是 一 种 简单 的 语言 ,但 它 的 功能 却 很 强大 ,具体 如 下 : 

1) 制作 网 页 特效 

这 几乎 是 所 有 JavaScript 的 初学 者 想 学 习 JavaScript 的 第 一 个 动机 ,例如 光标 动画 、 信 
息 提 示 , 动 态 广告 面板 ,检测 鼠标 行为 等 。 

2) 提升 使 用 性 能 

越 是 复杂 的 代码 越 需要 耗费 系统 资源 来 执行 ,因为 大 部 分 的 JavaScript 程序 代码 都 在 
客户 端 执 行 ,在 操作 时 完全 不 用 服务 器 操心 .这 样 网 页 服务 器 就 可 以 将 资源 用 在 给 客户 提供 
更 多 、 更 好 的 服务 上 。 例 如 申请 会 员 要 填 的 表单 ,JavaScript 的 任务 就 是 在 数据 送 到 服务 器 
前 进行 有 效 性 测试 。 

3) 窗口 动态 操作 

利用 JavaScript 可 以 自由 地 设计 网 页 窗口 的 大 小 、 打 开 与 关闭 等 ,甚至 可 以 在 不 同窗 口 
文件 中 互相 传递 参数 。 


3. 在 Web 中 的 应 用 


1) 在 HTML 中 租 入 JavaScript 
在 HTML 中 通过 标记 二 script 二 ... 一 /script 二 引入 JavaScript 代码 , 当 浏 览 器 读 取 到 
去 script 盖 标记 时 ,解释 执行 其 中 的 脚本 。 其 中 ,可 以 将 所 script 盖 标记 放 在 头 部 过 head 标 
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记 中 ,此 时 JavaScript 代码 必须 定义 成 函数 形式 ,并 在 主体 二 body 二 标记 内 调用 或 通过 事件 
触发 。 通 常 , 放 在 二 head 二 标记 内 的 脚本 在 页 面 装载 时 同时 载 入 ,这 样 在 主体 二 body 二 标 
记 内 调用 时 可 以 直接 执行 ,提高 了 脚本 的 执行 速度 。 当 然 , 也 可 以 将 二 script 二 标记 放 在 主 
体 一 body 过 标记 中 ,此 时 JavaScript 代码 可 以 定义 成 函数 形式 ,在 主体 天 body 二 标记 内 调用 
或 通过 事件 触发 ,也 可 以 在 二 script 二 标记 内 直接 编写 脚本 语句 ,在 页 面 装 载 时 同时 执行 相 
关 代 码 , 这 些 代码 执行 的 结果 直接 构成 网 页 的 内 容 。 

2) 链接 JavaScript 文件 

在 Web 页 中 引入 JavaScript 程序 的 另 一 种 形式 是 采用 链接 JavaScript 文件 的 形式 ,如 
果 脚 本 程序 较 长 或 者 同一 段 脚本 可 以 在 若干 个 Web 页 中 使 用 , 则 可 以 将 脚本 放 在 单独 的 一 
个 JavaScript 文件 里 ,然后 链接 到 需要 它 的 HTML 文件 ,这 相当 于 将 其 中 的 脚本 填 入 链 
接 处 。 

如 果 要 引用 外 部 脚本 文件 ,使 用 二 script 二 标记 的 src 属性 来 指定 外 部 脚本 文件 的 
URL。 如 果 使 用 了 二 script 二 标记 的 src 属性 , 则 Web 浏览 器 只 使 用 在 外 部 文件 中 的 脚本 ， 
并 忽略 位 于 该 二 script 二 标记 之 间 的 任何 脚本 。 


4. 编写 工具 


对 于 JavaScript 脚本 的 编写 ,可 以 采用 两 种 方式 ,一 种 是 使 用 纯 文本 编辑 器 , 另 一 种 是 
使 用 专业 化 脚本 编辑 工具 。 

1) 使 用 纯 文本 编辑 器 

使 用 纯 文 本 编辑 器 (如 Windows 的 记事 本 ) 来 编写 脚本 是 早期 编程 人 员 常 用 的 方法 。 
这 种 方法 的 优点 是 简单 、. 易 用 ; 缺点 是 由 于 这 种 编辑 器 的 主要 用 途 是 编辑 纯 文本 ,不 具备 对 
JavaScript 语言 的 特性 支持 。 因 此 , 它 多 适用 于 脚本 的 少量 编写 和 修改 , 当 要 进行 大 量 的 脚 
本 编写 和 设计 时 , 则 需要 专业 化 的 脚本 开发 工具 。 

2) 使 用 专业 化 脚本 编辑 工具 

使 用 可 视 化 工具 (如 Frontpage、Dreamweaver 以 及 Flash 等 工具 ) 可 以 十 分 容易 地 在 
Web 页 面 中 加 入 脚本 ,从 而 完成 一 些 功能 。 这 些 工 具 是 处 理 JavaScript 的 专业 化 开发 工具 ， 
具有 许多 处 理 JavaScript 特性 的 功能 ,如 代码 自动 生成 .语法 敏感 编辑 .调试 等 ,因此 现在 的 
开发 人 员 经 常 使 用 这 些 工具 进行 Web 程序 的 开发 ,以 提高 效率 。 必 须 注意 的 是 ,这 些 工具 
在 自动 生成 有 关 的 JavaScript 代码 时 会 加 入 一 些 元 余 的 代码 ,但 这 不 会 影响 熟练 的 脚本 编 
程 人 员 对 Web 页 中 脚本 的 控制 。 


13.1.2 第 一 个 JS 程序 


打开 记事 本 ,将 以 下 代码 录入 记事 本 中 ,然后 选择 [文件 〗I【 保 存 ] 命 令 ,将 文件 类 型 选 为 
【全 部 】, 并 将 文件 命名 为 javascriptl. html, 浏 览 文件 。 注 意 ,此 处 保存 的 文件 扩展 名 必须 
加 上 。 
<! -- javascript1. html 一 一 > 
< html > 


2 
3 <head> 
4 <title > 第 一 个 JavaScript 实例 </title> 
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5 </head> 

6 <body> 

7 < script type = "text/javascript"> 

8 document. write{ "第 一 个 JavaScript 实例 ! }; 
9 </script > 

10 </body> 

11 </html> 


13.1.3 编写 与 规则 
1. 代码 的 编写 与 执行 


JavaScript 是 一 种 脚本 语言 。 脚 本 语言 是 指 在 Web 浏览 器 内 由 解释 器 解释 执行 的 编 
程 ,在 每 次 执行 的 时 候 解释 器 都 会 把 程序 代码 翻译 成 可 执行 的 格式 。 使 用 脚本 语言 编写 的 
程序 都 是 在 脚本 引擎 装载 HTML 页 面 时 解释 执行 的 ,脚本 引擎 是 一 个 解释 器 , 它 是 Web 浏 
览 器 的 一 部 分 。 一 个 包含 翻译 脚本 的 脚本 引擎 的 Web 浏览 器 称 为 脚本 宿主 ,例如 Internet 
Explorer 就 是 JavaScript 程序 的 脚本 宿主 。 

JavaScript 既 可 以 应 用 于 客户 端 (浏览 器 端 ) ,也 可 以 应 用 于 服务 器 端 ,只 是 在 使 用 时 有 
所 区 别 , 具 体 如 下 : 

1) 编程 的 区 别 

在 客户 端 应 用 JavaScript 时 是 把 JavaScript 代码 通过 一 script 二 .一 /script 二 标记 舱 和 人 
到 HTML 代码 中 ; 而 在 服务 器 端 应 用 JavaScript 时 是 把 JavaScript 代码 通过 二 server 二 …. 
二 /server 二 标记 或 通过 一 script language 一 “javascript”runat 一 "server" 二... 一 /script 二 的 方 
式 租 入 服务 器 端的 脚本 或 程序 中 。 

2) 执行 方式 的 区 别 

客户 端的 JavaScript 是 浏览 器 通过 解释 的 方式 执行 ,而 服务 器 端的 JavaScript 是 通过 
编译 的 方式 执行 , 且 执行 后 将 生成 *. web 类 型 的 文件 。 

JavaScript 是 一 种 解释 语言 ,其 源 代码 在 发 往 客户 端 执行 之 前 不 需要 经 过 编译 ,而 是 将 
文本 格式 的 字符 代码 发 送 给 客户 端 由 浏览 器 解释 执行 , 它 是 由 上 而 下 地 执行 ,这 种 语言 执行 
的 弱点 是 容错 性 较 差 ,如果 一 条 执行 不 了 ,那么 下 面 的 语言 也 无 法 执行 ,而 且 由 于 一 条 一 条 
地 解释 ,速度 较 慢 。 


2. 语法 规则 


1) 大 小 写 

JavaScript 对 大 小 写 是 敏感 的 ,这 意味 着 大 写字 母 和 相应 的 小 写字 母 是 不 同 的 ,如 果 在 
脚本 中 使 用 result、Result 和 RESULT, 每 一 个 标识 符 都 会 被 认为 是 不 同 的 变量 。 大 小 写 敏 
感 适 用 于 这 种 语言 的 各 个 方面 ,包括 关键 字 、 运 算 符 、 变 量 名 、 事 件 处 理 器 、 对 象 属性 等 。 所 
有 JavaScript 的 关键 字 都 是 小 写 的 ,例如 使 用 让 语句 的 时 候 ,必须 确保 输入 的 是 和 f, 而 不 是 
IF ,因为 JavaScript 使 用 了 “ 驼 山 ?命名 的 传统 ,许多 方法 和 属性 的 使 用 混合 大 小 写 。 比 如 ， 
M 在 Document 对 象 的 lastModified 属性 中 必须 是 大 写 的 ,使 用 小 写 的 m 将 会 导致 返回 一 
个 未 被 定义 的 值 。 
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大 小 写 敏感 意味 着 用 户 在 定义 和 使 用 变量 时 必须 非常 小 心 ,在 使 用 结构 化 语句 (例如 计 
和 while) 的 时 候 以 及 使 用 对 象 属性 的 时 候 同 样 如 此 ,一 个 拼写 上 的 错误 将 会 导致 整个 脚本 
的 含义 都 会 发 生变 化 ,从 而 带 来 很 多 调试 上 的 麻烦 。 
2) 代码 书写 格式 
下 面 是 JavaScript 脚本 程序 的 几 种 基本 格式 : 
(1) 将 JavaScript 的 程序 代码 放 在 二 script 二 ... 一 /script 一 中 。 
< script> 


document. write("Hello World!!!1"); 


</script> 
(2) 在 二 script 二 标记 中 加 上 language 属性 ,指定 使 用 哪 一 种 语言 。 


< script language = "JavaScript"> 
document. write("Hello World!!!"); 
</script > 


(3) 在 标记 language 属性 外 进一步 指明 JavaScript 的 版 本 号 。 


< Script language = "JavaScript1.0"> 

document. write("Hello World!!!"); 

</script > 

(4) 如 果 基 于 模块 化 考虑 ,可 以 将 可 能 重复 使 用 的 程序 代码 独立 成 一 个 外 部 文件 ,只 要 
以 .js 为 扩展 名 ,例如 hello. js, 利 用 src 属性 就 可 以 将 该 文件 的 内 容 包含 进来 。 

< Script src= "hello. js"> 

</script > 

说 明 :“document, write("Hello World!111");” 必 须 保 存 为 一 个 外 部 文件 hello. js。 

(5) 为 避免 客户 端 使 用 了 版 本 较 低 的 浏览 器 ,造成 对 JavaScript 不 完全 支持 ,从 而 可 能 
出 现 许多 错误 ,可 以 将 所 有 的 程序 代码 用 HTML 的 注释 标记 括 起 来 ,让 这 些 低 版 本 的 浏览 
咒 视 而 不见。 

< script language = "JavaScript"> 

<! -- 以 下 程序 隐藏 起 来 ,让 旧 的 浏览 器 视而不见 

document. write("Hello World!!!")7 


// 程 序 代码 隐藏 到 此 为 止 --> 


</script > 
(6) 使 用 JavaScript 协议 。 


<a href = "JavaScript:alert('Hello World!!!')"> 请 单 击 </a> 

<a href ="#" onclick= "alert('Hello World!!!')"> 请 单 击 </a> 

<a href = "JavaScript://" onclick = "alert( 'Hello World!!!')"> 请 单 击 </a> 

3) 保留 字 

基本 上 ,每 一 种 编程 语言 都 有 它 的 保留 字 ,JavaScript 也 有 它 自 己 的 保留 字 ,JavaScript 
还 有 一 些 保留 字 不 能 在 标识 符 中 使 用 。 保 留 字 对 JavaScript 语言 有 特殊 的 含义 ,它们 是 语 
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言语 法 的 一 部 分 ,使 用 保留 字 在 加 载 脚本 的 时 候 将 产生 编译 错误 。 保 留 字 如 表 13-1 所 示 。 


表 13-1 JavaSeript 的 保留 字 


保 留 字 
break case catch continue debugger 
default delete do else false 
finally for function if in 
instanceof new null return switch 
this throw true try typeof 
Var void while with 


JavaScript 还 有 一 些 留 给 将 来 使 用 的 保留 字 , 这 些 保 留 字 不 是 现在 JavaScript 语言 的 一 
部 分 ,它们 是 为 将 来 的 使 用 保留 的 。JavaScript 未 使 用 的 保留 字 如 表 13-2 所 示 。 
表 13-2 JavaScript 未 使 用 的 保留 字 


未 使 用 的 保留 字 


abstract double goto native static 

boolean enum implements package super 
byte export import private synchronizd 
char extends int protected throw 
class final interface pubilc transients 
const float long short volatile 


4) 分 号 和 语句 结束 符 


JavaScript 区 分 字母 的 大 小 写 , 语 句 以 分 号 *; 
句 的 结束 ,也 可 以 将 多 个 语句 写 在 同一 行 中 ,用 分 号 将 它们 隔离 开 来 。 


(13,2 JavaScript 程序 


”作为 结束 符 , 分 号 意味 着 JavaScript 语 


JavaScript 程序 由 语句 、 语 句 块 .函数 、 对 象 .方法 、 属 性 等 构成 ,程序 结构 可 分 为 顺序 、 


分 支 和 循环 3 种 基本 结构 。 
13.2.1 语句 和 语句 块 


JavaScript 语句 是 发 送 给 浏览 器 的 命令 ,这 些 命令 的 作用 是 告诉 浏览 器 要 做 的 事情 。 


例如 下 面 语句 的 作用 是 告诉 浏览 器 在 页 面 上 输出 “我 是 JavaScript 程序 1”。 


document. write{ "我 是 JavaScript 程序 ! }; 


多 行 JavaScript 语句 可 以 组 合 起 来 形成 语句 块 , 语 句 块 以 左 花 括 号 “{ ?开始 ,以 右 花 括 
号 “) 结束 。 下 面 的 语句 块 向 网 页 输出 一 个 标题 以 及 两 个 段落 。 


1 < script type = "text/JavaScrip"> 


2 1 


3 document. write {"< hl > 标题 1 </hl >"); 
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document.write{"<p> 这 是 段落 I</p>"); 
document.write{"<p> 这 是 段落 2</p>"); 
} 


</script> 


TAUumnp 


13.2.2 代码 
JavaScript 代码 是 由 若干 条 语句 或 语句 块 构成 的 执行 体 , 在 以 下 代码 中 第 2 一 7 行 由 语 


句 和 语句 块 构 成 的 就 是 JavaScript 代码 。 


1 < script type = "text/javascript"> 
党 var color = "red"; 

E} if(color == "red") 

攻 - 

5 document. write(" 颜 色 是 红色 !"); 
6 ”alert(" 颜 色 是 红色 !"); 

LA 于 

8 


</script > 


13.2.3 消息 对 话 框 

JavaScript 中 的 消息 对 话 框 分 为 告警 框 .确认 框 和 提示 框 3 种 。 

1. 告警 框 

alert() 函 数 用 于 显示 带 有 一 个 图 标 \ 一 条 指定 消息 和 一 个 【确定 3 按钮 的 告警 框 。 
基本 语法 : 

alert(message); 

说 明 : message 参数 用 于 显示 弹出 对 话 框 上 的 纯 文本 ( 非 HTML 文本 )。 

2. 确认 框 


confirm() 方 法 用 于 显示 带 有 一 个 图 标 、 指 定 消息 和 [确定 ] 及 [取消] 按钮 的 对 话 框 。 
基本 语法 : 
confirm(message); 


说 明 : message 参数 用 于 显示 弹出 对 话 框 上 的 纯 文本 ( 非 HTML 文本 )。 
如 果 用 户 单 击 【确定 了 按钮 , 则 confirm() 返 回 true; 如 果 单 击 【 取 消 ] 按 钮 , 则 confirm() 


返回 false; 在 用 户 单 击 【 确 定 ] 按 钮 或 [取消 3 按钮 把 对 话 框 关闭 之 前 , 它 将 阻止 用 户 对 浏览 
器 的 所 有 操作 。 在 调用 confirm() 时 ,将 暂停 对 JavaScript 代码 的 执行 ,在 用 户 做 出 响应 之 
前 不 会 执行 下 一 条 语句 。 


3. 提示 框 
prompt() 方 法 用 于 提示 用 户 在 进入 页 面前 输入 某 个 值 。 
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基本 语法 : 
Pprompt (text, defaultValue) 


说 明 : text 用 于 设置 提示 信息 ; defaultValue 用 于 设置 默认 的 输入 值 。 

如 果 用 户 单 击 提示 框 中 的 [取消 3 按钮 , 则 返回 null; 如 果 用 户 单 击 【确定 ] 按 钮 , 则 返回 
在 文本 输入 框 中 输入 的 值 ; 在 用 户 单 击 【确定 按钮 或 [取消 按钮 把 对 话 框 关闭 之 前 , 它 将 
阻止 用 户 对 浏览 器 的 所 有 操作 。 在 调用 prompt() 时 ,将 暂停 对 JavaScript 代码 的 执行 ,在 
用 户 作 出 响应 之 前 不 会 执行 下 一 条 语句 。 


13.2.4 注释 


JavaScript 提供 了 两 种 类 型 的 注释 , 即 单行 注释 和 多 行 注释 。 单 行 注释 使 用 “//” 作 为 
注释 标记 ,可 以 单独 一 行 ,或 跟 在 代码 末尾 放 在 同一 行 中 ,“//” 后 为 注释 内 容 部 分 。 当 注释 
行 数 较 少时 适合 使 用 单行 注释 ,如 果 注 释 行 数 较 多 , 则 需要 在 每 行 的 开头 加 *//”, 比 较 麻 烦 ， 
此 时 应 使 用 多 行 注释 。 多 行 注释 可 以 包含 任意 行 数 的 注释 文本 ,以 “/ x ”标记 开始 、 以 “x* /” 
标记 结束 ,在 两 个 标记 之 间 所 有 的 内 容 都 是 注释 文本 ,所 有 注释 的 内 容 都 将 被 浏览 器 忽略 ， 
不 影响 页 面 效 果 和 程序 的 执行 ,对 以 后 用 户 阅 读 和 维护 程序 十 分 方便 。 

使 用 注释 可 以 防止 代码 执行 ,注释 的 作用 是 为 代码 添加 阅读 说 明 , 但 有 时 也 会 用 来 屏蔽 
某 些 语句 行 的 执行 ,对 程序 调试 非常 有 用 。 例 如 : 


1 <! -- javascript. html -一 > 

2 <html> 

3 < head > 

4 <title > 注释 使 用 实例 </title> 

5 </head> 

6 <body> 

了 < script type = "text/javascript"> 
8 // 这 是 单行 注释 

9 /* 

10 ”这 是 多 行 注释 

11 ”可 以 包含 多 行内 容 

12 */ 

13  //alert(" 此 语句 不 执行 !"); 

14 ”alert(" 此 语句 执行 了 !"); // 执 行 时 弹出 告警 消息 框 
15 </script> 

16 </body> 

17 </html > 


(3,3 变量 .数据 类 型 和 表达 式 


在 JavaScript 中 变量 是 存储 信息 的 容器 , 它 拥 有 动态 类 型 ,这 意味 着 相同 的 变量 可 用 作 
不 同 的 类 型 ,而 表达 式 是 解释 器 能 够 对 变量 进行 计算 的 语句 。 
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13.3.1 变量 
1. 变量 的 声明 和 初始 化 


JavaScript 变量 是 一 个 存储 或 者 表示 数据 的 名 称 ,可 用 来 存储 和 表示 各 种 数据 类 型 的 
数据 ,并 且 这 些 值 在 程序 运行 期 间 是 可 以 改变 的 。JavaScript 是 一 种 弱 数 据 类 型 ,统一 使 用 
关键 字 var 声明 ,JavaScript 会 在 需要 时 自动 对 不 同 的 数据 类 型 进行 转换 。 

语法 : 

var 变量 名 [ = 初 值 ][, 变量 名 [ = 初 值 ]…] 


说 明 : var(variant) 是 关键 字 , 在 声明 时 至 少 要 有 一 个 变量 ,每 个 变量 要 起 一 个 合适 的 
名 称 , 变 量 的 命名 应 该 符合 规范 ; 可 以 同时 声明 多 个 变量 ,多 个 变量 之 间 用 逗号 *, "分隔, 并 
可 以 在 声明 变量 的 同时 进行 赋值 。 

每 条 声明 语句 均 需 要 以 “;” 结 束 ,这 是 一 个 好 习惯 。 

例如 : 


1 varxl,yl; 
2 var str; 


2. 变量 的 命名 

创建 合法 的 变量 必须 满足 下 面 几 个 规则 : 

。 第 一 个 字 是 ASCII 字母 (大 小 写 均 可 ) 或 者 下 划 线 ,但 不 可 以 是 数字 。 
变量 必须 由 字母 ,数字 和 下 划 线 组 成 。 

变量 不 可 以 是 保留 字 。 

3. 变量 的 作用 域 


所 谓 变 量 的 作用 域 就 是 变量 发 生 作 用 的 范围 。 变 量 在 声明 之 后 ,只 在 自己 的 作用 域 中 
有 效 ,在 变量 的 作用 域外 使 用 变量 将 导致 解释 器 报错 。 

Var x; 

function FirstFuntion() 


{ 


var y= 2; 
} 
x=y; ”// 错 误 ,在 变量 y 的 作用 域外 使 用 变量 


在 上 面 这 个 例子 中 有 一 个 简单 的 函数 FirstFuntion(), 这 个 函数 声明 并 初始 化 了 一 个 
变量 y, 在 函数 结束 后 ,将 y 的 值 又 赋 给 了 xz, 这 时 y 已 经 在 它 的 作用 域外 ,使 用 变量 y 将 导 
致 解释 器 报错 。 


13.3.2 数据 类 型 


数据 类 型 是 每 一 种 计算 机 语言 的 重要 基础 ,JavaScript 中 的 数据 类 型 可 以 分 为 字符 型 、 
数值 型 布尔 型 ,Null、Undefined 和 对 象 6 种 。 
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1. 字符 型 (String) 


字符 型 数据 又 称 为 字符 串 ,由 若干 个 字符 组 成 ,并 且 需 要 用 单 引号 (') 或 双 引 号 (") 封 装 
起 来 (在 JavaScript 中 ,使 用 单 引 号 和 双 引 号 的 效果 是 一 样 的 )。 下 面 的 例子 列举 了 正确 和 
错误 使 用 字符 型 数据 的 两 种 情形 : 

"Tiger", 'JavaScript 字符 串 ' (正确 ) 

'document", "你 好 ' (错误 , 单 引号 、 双 引号 不 配 ) 

在 使 用 字符 串 的 过 程 中 ,有 时 会 遇 到 一 种 情况 : 在 4 个 字符 串 中 需要 使 用 单 引 号 或 双 
引号 。 正 确 的 方法 是 在 用 双 引 号 标记 的 字符 串 中 加 入 引用 字符 时 使 用 单 引 号 ,在 用 单 引 号 
标记 的 字符 串 中 加 入 引用 字符 时 使 用 双 引 号 , 即 保证 一 个 字符 串 的 开头 和 结尾 使 用 同一 种 
引号 ,而 字符 串 内 使 用 另 一 种 引号 。 下 面 给 出 了 正确 的 用 法 : 


"热烈 欢迎 参加 'JavaScript 技术 ' 研 讨 的 专家 " 


2. 数值 型 (Number) 


与 其 他 编程 语言 类 似 ,JavaScript 中 最 基本 的 一 种 数据 类 型 是 数值 型 ,该 类 型 可 分 为 整 
型 . 浮 点 型 .内 部 常量 以 及 特殊 值 。 

(1) 整 型 : 例如 100. 一 300、0 等 都 是 整数 。 整 数 除了 用 十 进 制 表示 外 ,还 可 以 用 八进制 
和 十 六 进 制 的 方式 表示 。 使 用 0 开头 的 整数 是 八进制 整数 ,如 017、 一 010 等 都 是 合法 的 八 
进 制 整 数 ; 使 用 0x 开头 的 整数 是 十 六 进 制 整数 ,如 0x10、0xla3d 都 是 合法 的 十 六 进 制 整数 。 

(2) 浮 点 型 : 3. 4 一 540. 66 都 是 浮 点 型 数值 , 浮 点 数 还 可 以 采用 科学 记 数 法 表示 ,如 
人 3125 

(3) 内 部 常量 : JavaScript 中 常用 的 内 部 常量 如 表 13-3 所 示 。 


表 13-3 JavaScript 中 的 内 部 常量 


常 量 说 明 常 量 说 有 明 
Math. E 自然 数 Math. LN2 2 的 自然 对 数 
Math. PI 圆周 率 Math. LN10 10 的 自然 对 数 
Math. SQRT2 2 的 平方 根 Math. LOG2E 以 2 为 底 的 e 的 对 数 
Math. SQRTI1-2 1/2 的 平方 根 Math. LOG10E 以 10 为 底 的 e 的 对 数 


(4) 特殊 值 : JavaScript 中 的 特殊 值 如 表 13-4 所 示 。 
表 13-4 JavaScript 中 的 特殊 值 


特 殊 量 说 明 
Infinity 无 穷 大 
Number. NaN 非 数 字 值 (Not a Number) 
Number. MAX_VALUE 可 表示 的 最 大 的 数 
Number. MIN_VALUE 可 表示 的 最 小 的 数 
Number. NEGITIVE_INFINITY 负 无 穷 大 ,溢出 时 返回 该 值 


Number. POSITIVE_INFINITY 正 无 穷 大 ,溢出 时 返回 该 值 
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3. 布尔 型 (Boolean) 


布尔 型 是 一 种 只 含有 true 和 false 两 个 值 的 数据 类 型 ,通常 来 说 ,布尔 型 数据 表示 “ 真 ” 
或 “ 假 ”。 在 实际 应 用 中 ,布尔 型 数据 常用 在 比较 、 人 逻辑 等 运算 中 ,运算 的 结果 往往 是 true 或 
者 false。 例 如 3 二 2 的 比较 结果 是 true, 而 6 二 = 二 4 的 比较 结果 是 false。 此 外 ,布尔 型 变量 
还 常用 在 控制 结构 的 语句 中 ,例如 计 语 句 等 。 

在 JavaScript 中 ,通常 采用 true 和 false 表示 布尔 型 数据 ,但 也 可 将 它们 转换 为 其 他 类 
型 的 数据 ,例如 可 将 值 为 true 的 布尔 型 数据 转换 为 整数 1 ,而 将 值 为 false 的 布尔 型 数据 转 
换 为 整数 0, 但 不 能 用 true 表示 1 或 用 false 表示 0。 


4. Null 


在 JavaScript 中 ,Null 是 一 种 特殊 的 数据 类 型 ,也 称 为 空 类 型 ,此 类 型 只 有 一 个 值 , 即 
Null, 表 示 “ 无 值 ”, 什 么 也 不 表示 。Null 除了 表示 Null 类 型 的 数据 外 ,也 可 用 在 表示 其 他 类 
型 的 数据 中 ,如 对 象 . 数 组 等 , 当 变 量 不 再 使 用 时 ,将 它 赋值 为 Null, 以 释放 存储 空间 。 


5. Undefined 


在 JavaScript 中 ,Undefined 也 是 一 种 特殊 的 值 , 是 指 变量 创建 之 后 还 没有 赋值 之 前 所 
具有 的 值 ,其 返回 值 就 是 Undefined。 它 与 Null 值 的 不 同 之 处 在 于 Null 值 表 示 已 经 给 变量 
赋值 ,只 不 过 赋 的 值 是 “无 值 ”, 而 Undefined 表示 变量 不 存在 或 者 没有 赋值 ,如 果 使 用 未 定 
义 的 变量 也 会 显示 Undefined ,但 通常 使 用 未 定义 的 变量 会 造成 程序 错误 。 

6. 对 象 (Object) 

在 JavaScript 中 ,除了 数值 型 .字符 型 和 布尔 型 等 这 些 基本 的 数据 类 型 外 ,还 有 一 种 复 
合 的 数据 类 型 , 称 为 对 象 。 对 象 是 属性 和 方法 的 集合 .对象 的 属性 可 以 是 任何 类 型 的 数据 ， 
包括 数值 ,字符 、 布 尔 型 ,甚至 可 以 是 另 一 种 类 型 的 对 象 .而 方法 是 一 个 定义 在 对 象 中 的 函 
数 ,用 于 实现 特定 的 功能 。 

在 JavaScript 中 定义 了 多 个 对 象 ,例如 Data、Window、Document 等 。 


13.3.3 运算 符 与 表达 式 

1. 表达 式 

表达 式 是 解释 器 能 够 对 变量 进行 计算 的 语句 ,表达 式 主要 由 任何 合法 类 型 的 变量 和 运 
算 符 组 成 ,下 面 是 几 个 表达 式 的 例子 : 


var x=4; 
X=X+47 
Var y= xX; 
Y= Yt6 


分 号 代表 了 一 个 表达 式 的 结束 。 使 用 分 号 可 以 在 同一 行 中 包括 多 个 表达 式 , 例 如 : 


var x=4; vary=xi var y=y+1; 
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在 有 些 时 候 , 分 号 是 可 以 省 略 的 ,例如 本 节 的 第 一 个 例子 也 可 以 写成 : 

var X=4 

x=X+4 

var y=x 

y=y+6 

这 是 因为 这 些 表 达 式 是 被 分 行 符 隔 开 的 。 但 是 如 果 下 行 表 达 式 可 以 看 作 是 上 行 表 达 式 
的 扩展 , 则 必须 插入 分 号 ,一 个 很 典型 的 例子 是 return 关键 字 的 使 用 : 


return 
x 


将 被 解释 器 看 作 


return; 
xX; 


而 不 是 期 望 中 的 
return x 
这 是 因为 return 关键 字 的 参数 是 可 选 的 , 它 的 含义 是 返回 运行 结果 ,在 遇 到 换行 符 的 情况 
下 ,解释 器 将 不 返回 任何 参数 ,只 是 简单 地 执行 返回 操作 。 
如 果 需 要 使 用 一 组 表达 式 表示 一 个 特殊 的 条 件 或 者 结果 ,可 以 用 一 个 大 括号 “{) "将 这 
组 表达 式 放 置 在 一 起 ,被 大 括号 "{)" 放 置 在 一 起 的 一 组 表达 式 被 称 为 一 个 块 ,例如 : 
if(x=4) 
{ 
x=x+4; 
Var y=x; 
} 
在 这 段 代码 中 ,大 括号 中 的 代码 只 有 在 “x 二 4” 成 立 的 时 候 才 会 被 执行 ,并 且 这 两 个 表 
达 式 要 么 都 被 执行 ,要 么 都 不 执行 。 这 里 需要 注意 的 是 变量 y 的 作用 域 ,在 大 括号 外 使 用 
变量 y 将 出 现 错误 。 
注意 ,正确 地 使 用 块 将 有 助 于 提高 程序 的 可 读 性 。 
2. 算术 运算 符 和 赋值 运算 符 


运算 符 用 来 连接 表达 式 中 的 变量 ,并 对 这 些 变量 进行 各 种 操作 。 
JavaScript 支持 所 有 数学 中 的 算术 运算 符 , 例 如 加 (十 )、 减 (一 )、 乘 (x )、 除 (/) 等 。 
表 13-5 列 出 了 算术 运算 符 的 基本 功能 。 
表 13-5 JavaScript 的 算术 运算 符 


运 算 符 名 称 基本 功能 
浴 加 法 运算 符 求 十 号 两 边 变量 的 和 值 , 同 数学 符号 十 
一 减法 运算 符 求 一 号 两 边 变量 的 差 值 , 同 数学 符号 一 


共 乘法 运算 符 求 * 号 两 边 变量 的 乘积 , 同 数学 符号 * 
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续 表 
运 算 符 名 称 基本 功能 
/ 除法 运算 符 将 /号 前 变量 均 分 为 /后 变量 的 分 数 , 同 数学 符号 / 
%" 模 运 算 符 求 ^ 左 边 的 变量 除 以 右边 变量 后 的 余数 
平 抽 递 加 运算 符 将 十 十 号 左边 或 右边 的 变量 加 1 
= 递减 运算 符 将 一 一 号 左边 或 右边 的 变量 减 1 


需要 特别 说 明 的 是 , 当 “ 十 ”两 边 的 变量 是 字符 串 时 ,“ 十 ”不 做 加 法 运算 ,而 是 做 连接 操 


作 , 即 将 “十 ”两 边 的 字符 串 连接 起 来 ,例如 : 


var x= "hello " + "world."; 
变量 z 的 输出 结果 是 : 


hello world. 


当 “ 十 "作为 字符 串 连接 时 也 允许 变量 和 字符 串 结合 在 一 起 ,例如 : 


var x= "hello world. "; 


var y=x+" begin to study javascript."; 


变量 y 的 输出 结果 为 : 


hello world. begin to study javascript. 


当 “ 十 "同时 遇 到 字符 串 型 和 数值 类 型 时 ,也 许 会 碰 到 没有 预料 到 的 结果 ,这 是 因为 如 果 
“十 "在 执行 时 遇 到 了 一 个 字符 串 , 它 会 将 今后 遇 到 的 任何 类 型 数值 或 变量 当成 字符 串 进行 处 理 。 
赋值 运算 符 “ 二 ”的 作用 是 将 某 个 值 赋 给 一 个 变量 ,这 种 赋值 的 操作 既 可 以 是 一 对 一 的 ， 


也 可 以 是 同时 进行 的 ,例如 : 


var x= "7 is a number"; 
vara=b=c=7; 


3. 比较 运算 符 和 示 辑 运算 符 


比较 运算 符 的 作用 是 判断 表达 式 的 真 假 ,因此 比较 运算 符 返 回 的 结果 是 布尔 型 的 ， 


JavaScript 中 常见 的 比较 运算 符 见 表 13-6。 


表 13-6 ”JavaSeript 比较 运算 符 


符 号 要 广 举 例 结 果 
等 于 6 一 4 一 一 2 true 
不 等 于 2 十 3! =1 true 
大 于 等 于 2 十 3 之 一 5 true 
小 于 等 于 3+1<=4 true 
大 于 2 十 1]>3 false 
小 于 2 十 1<3 false 
等 于 (同一 类 型 ) 2 十 1 一 一 一 '2 十 1 false 
不 等 于 (同一 类 型 ) 1 十 2! ==3 true 
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特别 需要 注意 的 是 “二 ”和 "一 一 ”的 区 别 ，“ 一 ”是 赋值 运算 符 ,代表 将 某 个 值 赋 给 某 个 变 
量 ; “一 一 "是 迎 辑 运算 符 , 被 用 来 判断 两 个 量 是 否 相等 。 例 如 : 


y= (x== 2015); 


“x 二 二 2015” 是 一 个 逻辑 判断 表达 式 .表达 式 的 运算 结果 是 true 或 者 是 false, 在 解释 器 
计算 出 这 个 表达 式 的 值 后 将 值 赋 给 y。 

此 外 ,含有 “二 二 二 ”的 比较 表达 式 为 真 的 条 件 是 “二 二 二 ”两 边 的 变量 不 仅 数值 上 必须 
相等 ,数据 类 型 也 必须 是 一 样 的 。 

逻辑 运算 符 的 作用 是 将 比较 表达 式 组 合 起 来 作为 判断 的 依据 ,因此 逻辑 运算 符 最 常见 
于 for 语句 的 条 件 中 ,用 来 控制 流程 。 表 13-7 列 出 了 JavaScript 的 逻辑 表达 式 。 


表 13-7 JavaScript 的 逻辑 表达 式 


符 号 名 称 含 义 
! 逻辑 非 如 果 操 作 数 是 true, 则 返回 false; 反之 亦 然 
&& 逻辑 与 如 果 两 个 操作 数 都 是 true, 则 退回 true; 否则 返回 false 
山 逻辑 或 两 个 操作 数 中 任何 一 个 是 true, 则 返回 true; 否则 返回 false 


4. 位 运算 符 和 条 件 运算 符 
位 运算 符 是 对 字符 位 数 进行 控制 的 运算 符 。 对 两 个 十 进 制 的 整数 进行 位 运算 时 ， 
JavaScript 先 将 这 两 个 数 转换 成 32 位 整数 ,然后 在 位 运算 前 将 这 两 个 数字 转换 成 位 字符 。 
JavaScript 的 位 运算 符 如 表 13-8 所 示 。 
表 13-8 JavaScript 的 位 运算 符 


符 ”号 含 义 举 例 结 果 
< 按 位 左 移 12<<3 96 
Sr 按 位 右 移 12>>3 L 
SS 无 符号 右 移 12>>>3 YL 
- 按 位 非 一 越 = 
& 按 位 与 12&3 0 
下 按 位 异 或 共生 15 
| 按 位 或 1213 15 


这 里 以 12 二 二 3” 为 例 ,将 12 转换 为 二 进 制 数 后 为 00001100, 按 位 左 移 3 位 为 
01100000 ,转换 成 十 进 制 数 是 96 ,因此 1 二 一 3 一 96 。 
再 看 “12& 3”,12 转换 为 二 进 制 数 是 00001100,3 转换 为 二 进 制 数 为 00000011 ,看 下 列 
运算 
00001100 
& 00000011 
00000000 
当 上 、 下 两 个 数字 都 是 1 时 ,结果 是 1. 否 则 是 0, 所 以 12&3 二 0。 
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按 位 与 按 位 异 或 和 按 位 或 的 运算 规则 如 表 13-9 所 示 。 
表 13-9 ”JavaScript 的 逻辑 按 位 与 、 按 位 异 或 和 按 位 或 运算 规则 


第 一 个 字 节 第 二 个 字 节 按 位 与 (&) 按 位 异 或 (^) 按 位 或 (|) 
0 0 0 0 0 
0 1 0 1 | 
0 0 1 
1 1 1 1 0 


条 件 运 算 符 是 JavaScript 中 唯一 的 一 个 三 元 运算 符 。 所 谓 三 元 运算 符 就 是 在 使 用 运算 
符 时 必须 有 3 个 变量 存在 ,条 件 运 算 符 用 符号 "?” 表 示 , 其 使 用 方法 如 下 : 


a?b?c 


ab 和 c 是 3 个 表达 式 , 当 表 达 式 a 成 立时 , 取 表 达 式 b 的 值 ,否则 取 表 达 式 c 的 值 。 
例如 : 


var x= (a> 10)?10:20; 


这 个 运行 代码 声明 了 一 个 变量 z,z 的 值 是 由 a 的 值 决定 的 ,如 果 a 的 值 大 于 10, 那 么 
为 变量 x 赋值 10, 否 则 给 变量 x 赋值 20。 


5. 其 他 运算 符 
在 JavaScript 中 除了 上 述 运 算 符 外 ,还 有 一 些 其 他 运算 符 , 如 表 13-10 所 示 。 
表 13-10 其 他 运算 符 


运 算 符 操作 说 明 
， 逗号 运算 符 
new 新 建 对 象 运算 符 
delete 删除 对 象 运算 符 
typeof 类 型 运算 符 


1) 逗号 运算 符 (,) 

逗号 运算 符 是 先 计 算 第 一 个 表达 式 的 值 ,再 计算 第 二 个 表达 式 的 值 , 运 行 结 果 为 第 二 个 
表达 式 的 值 。 

例如 : 

rs= (3+5,10#6); 

这 个 例子 先 计算 第 一 个 表达 式 3 十 5 的 值 为 8, 再 计算 第 二 个 表达 式 10 * 6 的 值 为 60， 
最 后 将 第 二 个 表达 式 的 值 60 赋 给 变量 rs。 

2) 新 建 对 象 运算 符 (new) 

新 建 对 象 运算 符 用 于 创建 JavaScript 对 象 实例 或 数组 。 例 如 : 


var obj = new Object(); 
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var date = new Date(); 

var array = new Array(); 

在 上 例 中 ,第 一 个 语句 是 创建 一 个 Object 对 象 ,对 象 名 为 obj; 第 二 个 是 创建 一 个 Date 
对 象 ,对 象 名 为 date; 第 三 个 是 创建 一 个 Array 对 象 ,对 象 名 为 array。 

3) 删除 运算 符 (delete) 

删除 运算 符 用 于 删除 一 个 对 象 的 属性 或 某 个 数组 的 元 素 。 例 如 : 

delete array(30); 

delete obj. height; 

在 上 例 中 ,第 一 个 语句 是 删除 array 数组 中 下 标 为 30 的 元 素 (第 31 元 素 ) ,第 二 个 是 删 
除 对 象 obj 的 height 属性 。 

4) 类 型 运算 符 (typeof) 

类 型 运算 符 是 一 个 一 元 运算 符 , 其 操作 数 可 以 是 任意 类 型 ,运算 结果 返回 一 个 表示 操作 
数 类 型 的 字符 串 。 例 如 : 

typeof(300); 

typeof ("Hello"); 

在 上 例 中 ,第 一 个 运算 的 结果 为 Number, 第 二 个 运算 的 结果 为 String。 

类 型 运算 符 的 具体 规则 如 表 13-11 所 示 。 

表 13-11 类 型 运算 符 的 运算 规则 


数据 类 型 运算 结果 数据 类 型 运算 结果 
数字 型 Number 数组 
字符 型 String 函数 
布尔 型 Boolean Null 
对 象 Object 未 定义 undefined 


(3,4 控制 结构 


在 HTML 基础 上 ,使 用 JavaScript 可 以 开发 交互 式 Web 页 面 ,例如 可 以 在 线 填写 各 类 
表格 、 联 机 编写 文档 并 发 布 等 。JavaScript 的 出 现 使 得 网 页 和 用 户 之 间 实现 了 一 种 实时 性 
的 ,动态 的 ,交互 性 的 关系 ,使 网 页 包含 更 多 活路 元素 和 更 加 精彩 的 内 容 , 这 也 是 JavaScript 
与 HTML DOM 共同 构成 Web 网 页 的 行为 。 在 网 页 设计 中 ,JavaScript 的 主要 作用 是 实现 
内 容 与 行为 的 分 离 ,而 要 设计 交互 式 的 页 面 必须 编写 相应 的 脚本 程序 。 程 序 是 专门 用 来 解 
决 某 一 问题 的 特定 代码 。 

JavaScript 程序 设计 分 为 两 种 方式 , 即 面向 过 程 和 面向 对 象 的 程序 设计 ,每 种 方式 都 是 
对 数据 结构 和 算法 的 描述 。 在 所 有 编程 语言 中 ,程序 的 结构 有 3 种 ,分 别 为 顺序 结构 、 分 支 
结构 和 循环 结构 ,任何 复杂 的 算法 均 可 以 使 用 这 3 种 结构 来 表达 。 


269 


MYM 


270。 ”Web 前 端 开发 及 应 用 教程 


MV 


13.4.1 顺序 结构 


顺序 结构 是 程序 设计 中 最 常用 、 最 基本 的 一 种 程序 结构 ,是 按照 语句 出 现 的 顺序 从 第 一 
条 语句 开始 一 步 一 步 逐 条 执行 ,直到 最 后 一 条 语句 。 


13.4.2 分 支 结 构 


在 编写 代码 时 经 常 需要 根据 不 同 的 条 件 完成 不 同 的 行为 ,用 户 可 以 在 代码 中 使 用 条 件 
语句 来 完成 这 一 任务 ,在 JavaScript 中 可 以 使 用 下 面 4 种 形式 的 分 支 结构 语句 。 

。 单 if( ){ 语 句 块 } 语 句 : 在 条 件 成 立时 执行 语句 块 。 

。 双 if( ){ 语 句 块 1}else{ 语 句 块 2} 语 句 : 在 指定 条 件 成 立时 执行 语句 块 1, 不 成 立时 

执行 语句 块 2。 
多 if( ){ 语 句 块 1}else if( ) {语句 块 2}...else{ 语 句 块 nn) 语句 ; 在 指定 条 件 成 立时 执 
行 语句 块 1, 否 则 判断 第 2 个 条 件 , 如 果 成 立 执行 语句 块 2, 依 此 类 推 ,直到 所 有 条 件 
均 不 成 功 时 执行 语句 块 n。 

。 多 分 支 switch( )(} 语 句 : 根据 变量 或 表达 式 的 值 与 case 常量 匹配 的 情况 选择 其 中 

一 个 分 支 执行 。 

1. 计 语 和 句 

讶 语句 是 分 支 条件 语 句 , 即 根据 一 个 条 件 来 控制 程序 执行 的 流程 。 

语法 : 

证 (表达 式 ){ 

条 件 为 真 时 执行 代码 ; 

} 

说 明 : 

让 语 句 的 小 括号 中 表达 式 的 结果 类 型 必须 是 布尔 型 , 即 
true 或 false, 当 值 为 true 时 执行 大 括号 中 的 代码 ,否则 跳 过 
大 括号 中 的 代码 执行 大 括号 后 面 的 代码 。if 语句 的 流程 图 
如 图 13-1 所 示 。 


2. if...else 语句 


f..else 语句 是 双 分 支 条 件 语句 , 即 根据 一 个 条 件 来 控 
制程 序 执行 的 流程 。 


语法 : 图 13-1 单 分 支 证 语 句 流程 图 
证 (表达 式 ){ 

条 件 成 立时 执行 代码 1 
}else{ 


条 件 不 成 立时 执行 代码 2 
} 
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说 明 : 

证 ..else 语句 的 小 括号 中 表达 式 的 结果 类 型 必须 是 
布尔 型 , 即 true 或 false, 当 值 为 true 时 执行 代码 1, 否 则 
执行 代码 2。if...else 语句 的 流程 图 如 图 13-2 所 示 。 


3. 多 重 if...else 语句 


if...else if...else 语句 是 多 条 件 、 多 分 支 语句 ,可 根 
据 两 个 以 上 的 条 件 来 控制 程序 执行 的 流程 。 


语法 : 


1 if( 表 达 式 1){ 图 13-2” 双 分 支 语句 流程 图 
2 代码 1 


} 
else if( 表 达 式 2){ 
代码 2 


else{ 


代码 n 


Poowaouwmw 


o 


说 明 : 

在 多 重 if...else 语句 中 ,if 以 及 多 个 else if 后 面 的 小 括号 内 的 表达 式 的 值 为 布尔 类 型 ， 
在 程序 执行 时 ,按照 该 语句 中 表达 式 的 顺序 首先 计算 表达 式 1 的 值 ,如 果 计 算 结果 为 true， 
则 执行 代码 1 ,执行 完 结束 if...else if...else 语句 ; 如 果 计 算 结 果 为 false, 则 继续 计算 表达 式 
2 的 值 , 依 此 类 推 ,假设 第 m 个 表达 式 的 值 为 true, 则 执行 紧 跟 的 代码 m, 并 结束 if.. else 
if...else 语句 的 执行 ,否则 继续 计算 m 十 1 个 表达 式 的 值 ,如 果 所 有 表达 式 的 值 都 为 false, 则 
执行 关键 字 else 后 面 的 代码 ,结束 if... else if... else 语句 的 执行 ,其 执行 流程 如 图 13-3 
所 示 。 


代码 1 


代码 2 


1 


13-3 多重 让..else 条 件 语句 流程 图 
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4. switch 语句 


switch 语句 是 单条 件 、 多 分 支 语句 , 它 可 以 通过 判断 一 个 条 件 完 成 对 程序 多 个 分 支 的 
控制 , 比 if...else 的 使 用 更 方便 、 结 构 更 清晰 。 
语法 : 
1 switch( 表 达 式 ){ 
2 case 常量 1: 
3 {代码 1 
4 }break; 
5 case 常量 2: 
6 {代码 2 
7 }break; 
8 


9 case 常 量 n: 

10 {代码 n 

11 }break; 

12 default 

13 {代码 n+1} 

14 } 

说 明 : 

在 执行 switch 语句 时 ,首先 计算 变量 或 表达 式 的 值 ,然后 查找 和 这 个 值 匹配 的 case 常 
量 , 如 果 找 到 了 匹配 的 常量 ,执行 后 面 的 语句 块 ,否则 执行 default 后 面 的 语句 块 。 

在 上 面 的 语法 格式 中 ,每 个 case 语句 块 的 后 面 都 有 一 个 break 语句 ,其 作用 是 终止 
switch 语句 的 执行 ,继续 执行 switch 下 面 的 语句 。 如 果 没 有 这 个 break 语句 ,那么 switch 
语句 会 从 和 表达 式 的 值 匹配 的 case 常量 开始 ,依次 执行 后 面 所 有 的 代码 ,直到 switch 语句 
的 结尾 部 分 。 


13.4.3 循环 结构 


在 实际 问题 中 还 有 一 种 情况 , 那 就 是 需要 重复 执行 一 组 语句 ,直到 达成 目标 。 例 如 将 一 
个 班级 中 所 有 同学 的 名 字 输 出 到 网 页 上 ,不 能 在 页 面 中 重复 写 n 行 相同 的 代码 去 输出 所 有 
同学 的 名 字 , 这 种 情况 使 用 循环 结构 可 以 解决 ,JavaScript 提供 了 for、while do... while、 
for...in 等 多 种 循环 。 


1. for 循环 

for 循环 是 一 种 结构 简单 .使 用 频率 高 的 循环 控制 语句 ,作用 是 有 条 件 地 重复 执行 一 段 
代码 。 

语法 : 


1 for( 表 达 式 1; 表达 式 2; 表达 式 3) 
2 { 
3 ”需要 循环 执行 的 代码 ; 
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说 明 : 

for 是 for 语句 的 关键 字 ,for 关键 字 后 面 的 一 对 小 括号 ”( )” 不 可 省 略 ,括号 中 用 分 号 
“3 分 隔 3 个 表达 式 ,表达 式 1 是 初始 表达 式 , 在 循环 开始 前 执行 ,一 般 用 来 定义 循环 变量 ; 
表达 式 2 是 判断 表达 式 , 就 是 循环 条 件 , 必 须 为 布尔 型 数据 的 表达 式 , 当 表达 式 的 结果 为 
true 时 循环 继续 执行 ,否则 循环 结束 ; 表达 式 3 是 循环 表达 式 ,在 每 次 循环 执行 后 都 被 执 
行 , 作 用 是 修改 循环 变量 ,然后 进行 判断 表达 式 的 计算 ,决定 是 否 继续 下 一 次 循环 。 

花 括号 “{)” 内 的 代码 为 循环 体 , 当 循 环 体 只 有 一 条 语句 时 花 插 号 可 以 省 上 略 。 

for 语句 的 执行 规则 如 下 : 

(1) 计算 初始 表达 式 的 值 , 完 成 循环 的 初始 化 工作 。 

(2) 计算 判断 表达 式 的 值 , 若 判断 表达 式 为 true, 跳 转 到 步骤 (3) ,否则 跳 转 到 步 又 (4) 。 

(3) 执行 循环 体 代 码 ,然后 计算 循环 表达 式 的 值 , 以 改变 循环 变量 , 跳 转 到 步骤 (2) 。 

(4) 结束 for 语句 的 执行 。 

for 语句 的 执行 流程 如 图 13-4 所 示 。 


2. while 循环 


while 循环 是 JavaScript 中 最 基本 的 循环 控制 语句 之 一 ,其 
作用 是 有 条 件 地 重复 执行 某 一 段 代 码 。 
语法 : 


1 while( 表 达 式 ) 


9 


需要 循环 执行 的 代码 ; 


FE 

4 } 

说 明 : 

while 语句 由 关键 字 while、 一 对 小 括号 ”( )” 中 的 表达 式 和 
一 对 花 括 号 *( }” 中 的 代码 组 成 ,代码 称 为 循环 体 ,表达 式 称 为 
循环 条 件 。 图 13-4 for 语句 流程 图 

while 语句 的 执行 规则 如 下 : 

(1) 计算 表达 式 的 值 , 如 果 值 为 true, 跳 转 到 步骤 (2) ,否则 跳 转 到 步骤 (3) 。 

(2) 执行 循环 体 代 码 , 跳 转 到 步骤 (1) 。 

(3) 终止 while 语句 的 执行 。 

在 使 用 while 循环 时 需要 注意 以 下 几 个 问题 : 

。 在 while 循环 之 前 必须 完成 循环 变量 的 初始 化 工作 。 

。 使 用 “{}” 将 循环 体 语句 括 起 来 ,即使 是 一 条 语句 也 要 使 用 花 括号 。 

。 在 循环 体 语句 中 必须 含有 循环 正常 退出 的 语句 , 即 循环 控制 语句 ,以 避免 发 生死 

循环 。 

由 于 while 循环 中 只 有 一 个 表达 式 ,不 像 for 循环 有 3 个 表达 式 , 所 以 完成 同样 的 工作 
需要 在 其 他 地 方 进行 处 理 ,如 变量 的 初始 化 必须 移 到 while 循环 开始 之 前 ; 其 次 是 循环 表 
达 式 的 工作 必须 移 到 while 循环 体内 执行 ,只 有 这 样 while 循环 才能 完成 与 for 循环 同样 的 
功能 。 
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while 语句 的 执行 流程 如 图 13-5 所 示 。 (GF) 
ZY 
3. do...while 循环 


do...while 循环 和 while 循环 非常 类 似 , 也 用 于 重复 执行 某 
一 段 代码 ,它们 的 不 同 在 于 while 循环 的 条 件 表达 式 位 于 while 
循环 的 头 部 ,而 do...while 循环 的 条 件 表 达 式 位 于 do...while 循 
环 的 尾部 ,因此 while 循环 总 是 先 检测 条 件 表 达 式 是 否 成 立 , 如 


代码 2 
果 成 立 才 执行 循环 体 代 码 ,而 do...while 循环 先 执行 一 次 循环 1 
体内 的 代码 ,再 判断 条 件 表达 式 是 否 成 立 , 如 果 成 立 继续 执行 循 代码 3 
环 体 语句 ,否则 结束 循环 。 
语法 : 
1 dof 
2 需要 循环 执行 的 代码 ; be 
3 jwhile( 表 达 式 ) 国人 本 作风 
说 明 : 


与 while 循环 一 样 ,在 使 用 do...while 循环 时 需要 注意 以 下 几 个 问题 ， 
。 在 使 用 do...while 循环 之 前 必须 完成 循环 变量 的 初始 化 工作 。 
。 使 用 *{}” 将 循环 体 语句 括 起 来 ,即使 是 一 条 语句 也 要 使 用 花 括号 。 
。 在 循环 体 语句 中 必须 含有 使 循环 正常 退出 的 语句 , 即 循 环 控制 语句 ,如 i 十 十 ,避免 
发 生死 循环 。 
一 do...while 循环 的 执行 规则 如 下 : 
(1) 执行 循环 体 代 码 。 
一 一 代码 (2) 计算 表达 式 的 值 ,如 果 值 为 true, 跳 转 到 步骤 (1) ,否则 跳 
转 到 步骤 (3) 。 
(3) 终止 do...while 语句 的 执行 。 
do...while 语句 的 执行 流程 如 图 13-6 所 示 。 


4. for...in 循环 


图 13-6 do.…while 语 句 。 在 JavaScript 中 ,除了 for 语句 可 以 用 于 控制 循环 结构 以 外 ,还 
流程 图 有 另 一 种 形式 的 for 语句 ,主要 用 于 数组 ,集合 对 象 的 遍历 ,也 需要 
循环 执行 某 一 段 代码 , 即 for...in 循环 。 
语法 : 


for(variable in object) 


3 
2 1 
3 。 需要 循环 执行 的 代码 ; 
4 } 

说 明 ， 

variable 可 以 是 一 个 变量 名 、 数 组 元 素 或 对 象 属性 ,object 可 以 是 一 个 对 象 名 ,或 者 计算 
结果 为 对 象 的 表达 式 。for...in 循环 将 对 object 对 象 的 每 一 个 属性 或 每 一 个 元 素 都 执行 一 
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次 循环 ; 在 循环 过 程 中 ,首先 将 object 对 象 的 一 个 属性 名 作为 字符 串 赋 给 变量 variable, 这 
样 在 循环 体内 就 可 以 通过 变量 variable 访问 对 象 属性 了 。 


5. 循环 的 嵌 套 


在 一 个 循环 内 又 包含 另 一 个 完整 的 循环 结构 , 称 为 循环 嵌 套 , 嵌 套 其 他 循环 就 构成 了 多 
重 循环 结构 。 


6. break 和 continue 语句 的 作用 


在 正常 的 循环 结构 中 ,每 次 循环 都 是 从 满足 条 件 开始 直到 不 满足 条 件 结束 ,也 就 是 说 必 
须 完整 地 执行 完 所 有 的 循环 。 但 在 实际 问题 中 有 时 并 不 需要 完整 地 执行 完 所 有 循环 才 结束 
程序 ,可 能 会 遇 到 一 些 需 要 提前 中 止 或 跳 过 某 些 循 环 的 情况 ,这 时 需要 使 用 break 和 
continue 语句 来 解决 实际 问题 。 

在 循环 体 中 ,break 语句 的 作用 是 立即 结束 循环 , 跳 转 到 循环 后 面 的 语句 ,而 不 管 原来 
的 循环 还 有 多 少 次 ,都 不 会 再 执行 。 

在 循环 体 中 ,continue 语句 的 作用 是 结束 本 次 循环 ,本 次 循环 后 面 的 所 有 语句 都 不 会 执 
行 ,直接 进入 下 一 次 循环 ,直到 循环 结束 。 


(3,5 函数 


函数 就 是 结构 化 的 可 重用 的 代码 段 ,是 用 来 完成 一 个 特定 功能 的 程序 代码 。 函 数 只 需 
要 定义 一 次 ,可 以 多 次 使 用 ,从 而 提高 程序 代码 的 复 用 率 , 既 减 轻 了 开发 人 员 的 负担 ,也 降低 
了 代码 的 重复 度 。 

JavaScript 函数 分 为 系统 内 部 函数 和 系统 对 象 定义 的 函数 及 用 户 自 定义 函数 。 函 数 需 
要 先 定义 后 使 用 ,JavaScript 函数 一 般 定 义 在 HTML 文件 的 头 部 head 标记 或 外 部 JS 文件 
中 ,而 函数 的 调用 可 以 在 HTML 文件 的 主体 body 标记 中 的 任何 位 置 。 


13.5.1 常用 系统 函数 


在 JavaScript 中 有 许多 预先 定义 的 系统 内 部 函数 和 对 象 定义 的 函数 ,如 document. 
write() 就 是 其 中 之 一 。 这 些 预 定义 的 系统 函数 大 多 存在 于 预定 义 的 对 象 中 ,例如 String、 
Date、Math、Window 及 Document 对 象 中 都 有 很 多 预定 义 的 函数 ,只 有 熟练 地 使 用 这 些 函 
数 才能 充分 发 挥 JavaScript 强大 的 功能 .简洁 、 高 效 地 完成 程序 设计 任务 。 

常用 系统 内 部 函数 又 称 为 内 部 函数 (或 内 部 方法 ), 它 与 任何 对 象 无 关 , 可 以 直接 使 用 。 


1. eval 函数 
语法 : 
eval(string) 


说 明 : 
eval 函数 的 作用 是 返回 字符 串 string 表达 式 中 的 值 。 该 函数 接受 原始 字符 串 作为 参 
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数 , 将 该 字符 串 作为 代码 在 上 下 文 环境 中 执行 ,并 返回 执行 结果 。 

string 是 要 计算 的 字符 串 表 达 式 ,含有 要 计算 的 JavaScript 表达 式 或 要 执行 的 语句 。 

2. escape 函数 

语法 : 

escape( string) 

说 明 : 

escape 函数 可 以 对 字符 串 (ISO 一 Latin-l 字符 集 ) 进 行 编码 ,这 样 就 可 以 在 所 有 的 计算 
机 上 读 取 该 字符 串 。 该 函数 不 会 对 ASCII 字符 和 数字 进行 编码 ,也 不 会 对 下 面 这 些 ASCII 
标点 符号 进行 编码 , 即 x* 、@ ,一 、 十 、. 、/, 其 他 所 有 的 字符 都 会 被 转 义 。 

string 是 要 被 转 义 或 编码 的 字符 串 。 

3. unescape 函数 

语法 : 

unescape( string) 

说 明 : 

unescape 函数 返回 的 字符 串 是 ISO 一 Latin-l 字符 集 的 字符 ,该 函数 找到 形式 为 %XX 
和 %XXXX 的 字符 序列 (X 表示 十 六 进 制 的 数字 ) ,用 字符 \u00XX 和 \uXXXX 替换 这 样 的 
字符 序列 进行 解码 。 

string 是 要 解码 或 反 转 义 的 字符 串 。 

4. parseFloat 函数 

语法 : 

parseFloat( string) 

说 明 ， 

parseFloat 函数 的 作用 是 返回 string 字符 串 对 应 的 实数 值 ,只 有 字符 串 中 的 第 一 个 数 
字 会 被 返回 ,如 果 字 符 串 string 的 第 一 个 字符 不 能 被 转换 为 数字 ,那么 parseFloat 会 返 
回 NaN。 

string 是 要 被 解析 的 字符 串 。 


5. parselnt 函数 

语法 : 

parselnt (string, radix) 

说 明 : 

parselnt 函数 的 作用 是 返回 string 字符 串 对 应 的 十 进 制 整数 值 ,参数 radix 用 于 指定 数 
字 的 基数 ,只 有 字符 串 中 的 第 一 个 数字 会 被 返回 ,如 果 字符 串 的 第 一 个 字符 不 能 被 转换 为 数 
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字 , 那 么 parselnt 会 返回 NaN。 

string 是 要 被 解析 的 字符 串 。 

radix 表示 要 解析 的 数字 的 基数 ,该 值 介 于 2 一 36 之 间 , 如 果 省 略 该 参数 或 其 值 为 0, 则 
数字 将 以 10 为 基数 来 解析 ; 如 果 它 以 “0? 开 头 , 将 以 8 为 基数 ; 如 果 它 以 “0x? 或 “0X? 开 头 ， 
将 以 16 为 基数 ; 如 果 该 参数 小 于 2 或 者 大 于 36, 则 parselnt( ) 将 返回 NaN。 


6. isNaN 函数 
语法 : 
isNaN( string) 


说 明 : 

isNaN 函数 的 作用 是 判断 string 是 否 为 数值 ,如 果 string 是 特殊 的 非 数 字 值 NaN( 或 
者 能 被 转换 为 这 样 的 值 ) ,返回 的 值 就 是 true; 如 果 string 是 其 他 值 , 则 返回 false( )。 

string 是 要 检测 的 值 。 


13.5.2 自 定义 函数 


函数 一 般 是 由 若干 条 语句 构成 的 能 够 完成 特定 功能 的 代码 ,函数 定义 如 下 。 

语法 : 

function 函数 名 (参数 1, 参数 2, .…, 参数 N) 

{ 

函数 体 

} 

说 明 : 

function 是 关键 字 , 组 成 一 个 函数 必须 以 function 开始 。 

函数 的 命名 必须 遵守 标识 符 命名 规范 ,函数 名 用 来 在 调用 时 使 用 。 

一 个 函数 既 可 以 有 参数 ,也 可 以 没有 参数 ,多 个 参数 之 间 用 逗号 ",” 分 隔 。 不 论 有 无 参 
数 ,括号 都 不 能 省 略 ,参数 类 型 不 需要 给 定 。 

函数 体 必须 写 在 *{” 和 “}” 内 ,“{”“)” 定 义 了 函数 的 开始 和 结束 。 

在 JavaScript 中 区 分 字母 大 小 写 ,因此 “function" 这 个 词 必须 是 全 部 字母 小 写 ,否则 程 
序 会 出 错 。 另 外 需要 注意 的 是 ,必须 使 用 大 小 写 完 全 相同 的 函数 名 来 调用 函数 。 


13.5.3 用 return 返回 函数 的 计算 结果 


函数 可 以 在 执行 完 后 返回 一 个 代表 执行 后 的 结果 ,当然 函数 也 可 以 不 返回 任何 值 ,返回 
函数 的 计算 结果 可 以 使 用 return 语句 来 实现 。 
语法 : 


return 函数 执行 结果 ; 
return; 
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说 明 : 

第 一 段 是 有 返回 值 的 ,第 二 段 是 没有 返回 值 的 。 

有 值 返 回 的 函数 调用 方式 与 无 值 返回 的 调用 方式 略 有 不 同 。 无 值 返回 可 以 通过 事件 触 
发 ,程序 触发 等 方式 调用 ; 有 值 返回 的 函数 类 似 于 操作 数 ,和 表达 式 一 样 可 以 直接 参加 运 
算 , 不 需要 通过 事件 或 程序 来 触发 。 

在 函数 体内 使 用 不 带 返 回 值 的 return 语句 可 以 结束 程序 的 运行 ,其 后 所 有 语句 均 不 再 
执行 。return 语句 只 能 返回 一 个 计算 结果 。return 语句 后 可 以 跟 一 个 具体 的 值 ,也 可 以 是 
一 个 变量 ,还 可 以 是 一 个 复杂 的 表达 式 。 


13.5.4 函数 变量 的 作用 域 


函数 体 是 完成 特定 功能 的 代码 段 ,在 代码 执行 过 程 中 总 需要 使 用 一 些 存放 程序 运行 的 
中 间 结 果 的 变量 。 变 量 分 为 局 部 变量 和 全 局 变量 。 局 部 变量 是 指 在 函数 内 部 声明 的 变量 ， 
该 变量 只 能 在 一 段 程序 中 发 挥 作用 ; 而 全 局 变量 是 指 在 函数 之 外 声明 的 变量 ,该 变量 在 整 
个 JavaScript 代码 中 发 挥 作用 ,全 局 变量 的 生命 周期 从 声明 开始 到 页 面 关 闭 时 结束 。 

局 部 变量 和 全 局 变量 可 以 重 名 ,也 就 是 说 ,即使 在 函数 体外 声明 了 一 个 变量 ,在 函数 体 
内 还 可 以 再 声明 一 个 同名 的 变量 。 在 函数 体内 部 ,局 部 变量 的 优先 级 高 于 全 局 变量 , 即 在 函 
数 体内 同名 的 全 局 变量 被 隐藏 了 。 

需要 注意 的 是 : 专用 于 函数 体内 部 的 变量 一 定 要 用 var 关键 字 声 明 , 和 否则 该 变量 将 被 
定义 成 全 局 变量 ,如 果 函 数 体外 部 有 同名 的 变量 ,可 能 导致 该 全 局 变量 被 修改 。 


(i3,6 JavaScript 事件 和 对 象 


13.6.1 事件 
1. 基本 概念 


1) 事件 (Event) 

事件 指 的 是 文档 或 者 浏览 器 窗口 中 发 生 的 一 些 特 定 交 互 瞬 间 。 用 户 可 以 通过 侦 听 器 
(或 者 处 理 程序 ) 来 预定 事件 ,以 便 在 事件 发 生 的 时 候 执行 相应 的 代码 ,例如 Click( 单 击 事 
件 )。 

2) 事件 驱动 (Event Driven) 

由 事件 引发 程序 的 响应 ,执行 事先 准备 好 的 事件 处 理 代 码 ,这 种 程序 运行 方式 称 为 事件 
驱动 ,如 onClick( 单 击 事件 驱动 ) 。 

3) 事件 处 理 代码 (Event Handle) 

在 JavaScript 中 ,事件 处 理 代 码 通 常 被 定义 为 函数 的 形式 ,在 其 中 加 入 所 需要 的 处 理由 
辑 , 并 将 之 关联 到 所 关注 的 事件 源 组 件 上 。 


2. 常用 事件 


JavaScript 的 常用 事件 见 表 13-12。 
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表 13-12 JavaSeript 常用 事件 


事件 名 称 适用 对 象 意 义 说 明 
Ns EE 当 图 形 尚未 完全 加 载 前 ,用 户 就 单 击 
" a 了 一 个 超 链接 ,或 单 击 了 停止 按钮 
window 及 所 有 表单 子 组 用 户 将 他 的 输入 焦点 (闪烁 光标 ) 从 窗 
件 (text\button select) 失去 焦点 口 或 表单 移 开 
全 text、password 、textarea、 改变 用 户 改变 组 件 的 什 
select 
click eh 用 户 在 上 述 对 象 上 单 击 一 下 鼠标 左 键 
(text,button,select) 
Dhloliak | J 中 下 所 有 表单 于 组 件 | 去 和 项 标 用 户 在 上 述 对 象 上 连续 双击 鼠标 
(text\button select) 
DrogDrop window 拖 电 用 户 用 鼠标 左 键 将 对 象 拖 电 至 窗口 
Error image、window 错误 加 载 文件 或 图 形 时 发 生 错误 
Focus | window 及 所 有 家 单子 组 | 取得 焦点 用 户 将 输入 焦点 放 进 上 述 对 象 中 
件 (text\button select) 
KeyDown | image vink 及 所 有 表单 了 | 按 下 键盘 上 的 任意 键 | 用 户 按 下 键盘 上 的 某 个 按键 的 一 刹那 
组 件 (text\button .select) 
KeyPress 。 | Pagevink 及 所 有 表单 了 | 按 下 键盘 上 的 任意 键 | 用 户 按 下 键盘 上 的 某 个 键 时 
组 件 (text\button select) 
image link 及 所 有 表单 子 用 户 按 下 键盘 上 的 某 个 键 后 按键 弹 起 
Sp 组 件 (text、button,select) 利和 上册 人 二 镍 汪汪 来 的 一 刹那 
Load document 加 载 浏览 器 读 入 该 文件 时 
document,link 及 所 有 表 本 二 
MouseDown 单子 组 件 (text.select) 单 击 鼠 标 用 户 单 击 鼠标 时 
document link 及 所 有 表 pe A 
Mot Mo 单子 组 件 (text\select) 各 动 职 标 二 
document,link 及 所 有 表 本 i 
MouseOver 单子 组 件 (textselect) 鼠标 进入 用 户 将 鼠标 移动 到 上 述 对 象 时 
document,link 及 所 有 表 本 
Mp 单子 组 件 (text、select) 移 开 鼠标 用 户 将 鼠标 离开 上 述 对 象 时 
document \link 及 所 有 表 GE 
MouseUp 单子 组 件 Ctext、selecb 放 开 鼠标 左 键 用 户 将 鼠标 左 键 放 开 时 
Move window 移动 用 户 或 程序 移动 窗口 时 
Reset form 重 来 一 次 用 户 单 击 表单 中 的 reset 按钮 时 
Resize window 改变 大 小 用 户 调 整 窗口 大 小 
Select text\password \textarea “| 选择 用 户 选取 上 述 对 象 
Submit form 送出 用 户 单 击 表单 中 的 submit 按钮 时 
Upload document 退出 ( 务 载 ) 用 户 关闭 或 退出 目前 网 页 
3. 事件 处 理 
1) 鼠标 事件 


在 网 页 设计 中 ,如 果 用 鼠标 对 网 页 中 的 元 素 进行 操作 会 触发 鼠标 事件 。 当 单 击 鼠标 左 
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键 时 会 触发 Click 事件 ,双击 鼠标 时 会 触发 DblClick 事件 ,将 鼠标 按 下 后 再 松 开 时 会 触发 
MouseUp 事件 等 。 
例如 : 


< input type = "button" name = "click" value = "鼠标 单 击 ” onClick = "alert( ' 你 单 击 了 我 ! ')> 


就 是 当 鼠 标 单 击 页 面 中 的 按钮 时 触发 的 鼠标 单 击 事件 。 

2) 键盘 事件 

键盘 事件 主要 有 3 个 ,分 别 是 KeyDown、KeyPress 及 KeyUp 事件 ,它们 用 来 检测 键盘 
按 下 \ 按 下 松 开 及 完全 松 开 这 些 动作 。 按 键 的 信息 被 包含 在 事件 发 生 时 创建 的 对 象 event 
中 ,用 event. keyCode 可 以 获得 按键 对 应 的 键 码 值 。 

3) 表单 事件 

表单 是 Web 应 用 中 和 用 户 进行 交互 的 最 常用 的 工具 ,用 户 注册 发表 文 章 和 评论 等 都 
需要 用 到 表单 ,用 户 在 表单 中 填写 数据 ,然后 将 数据 发 送 到 服务 器 端 。JavaScript 脚本 所 要 
做 的 主要 工作 就 是 表单 验证 ,如 验证 用 户 是 否 有 未 填 信 息 、 输 入 的 数据 格式 是 否 正确 等 ,这 
样 ,在 数据 被 提交 到 服务 器 之 前 数据 的 正确 性 和 合法 性 就 得 到 了 验证 并 反馈 给 了 用 户 , 用 户 
可 以 根据 提示 修改 错误 。 

表单 包含 的 元 素 有 很 多 ,例如 文本 输入 框 `. 下 拉 列 表 框 、 复 选 框 . 单 选 按钮 .提交 按钮 等 。 

表单 事件 包括 获得 焦点 与 失去 焦点 事件 .提交 及 重 置 事件 ,改变 及 选择 事件 。 

4) 窗口 事件 

窗口 事件 是 指 浏览 器 窗口 在 加 载 页 面 或 印 载 页 面 时 触发 的 事件 。 在 加 载 页 面 时 会 触发 
Load 事件 ,在 纯 载 页 面 时 会 触发 UnLoad 事件 ,这 两 个 事件 和 所 body 二 及 二 frameset 二 两 
个 页 面 元 素 有 关 。 


13.6.2 常用 对 象 


建立 对 象 的 目的 是 将 与 对 象 有 关 的 属性 和 方法 封装 在 一 起 提供 给 程序 设计 人 员 使 用 ， 
从 而 减轻 编程 人 员 的 工作 量 , 提 高 设计 Web 页 面 的 能 力 。 

JavaScript 的 对 象 类 型 可 以 分 为 下 面 4 类 。 

(1) JavaScript 的 本 地 对 象 (native object) : 本 身 提供 的 类 型 ,例如 Math 等 。 这 种 对 象 
无 须 具体 定义 ,直接 可 以 通过 名 称 引 用 它们 的 属性 和 方法 ,例如 Math. Random()。 

(2) JavaScript 的 内 置 对 象 (built-in object) : 例如 Array、String 等 。 这 些 对 象 独立 于 
宿主 环境 ,在 JavaScript 程序 中 由 程序 员 定义 具体 对 象 ,并 可 以 通过 对 象 名 来 使 用 。 

(3) JavaScript 的 宿主 对 象 (host object) : 被 浏览 器 支持 ,目的 是 为 了 能 和 被 浏览 的 文 
档 乃 至 浏览 器 环境 交互 ,例如 document、window 和 frames 等 。 

(4) JavaScript 的 自 定义 对 象 : 程序 员 根 据 需要 自己 定义 的 对 象 类 型 。 

对 象 在 使 用 之 前 需要 声明 和 实例 化 ,在 创建 对 象 时 可 以 使 用 new 关键 字 后 跟 实 例 化 的 
类 的 名 称 来 创建 ,如 通过 语句 “var obj 二 new Object();” 来 创建 一 个 Objet 对 象 。 在 创建 对 
象 后 可 以 通过 “对 象 名 称 . 属性 名 ”的 方式 来 访问 属性 ,可 以 通过 “对 象 名 称 . 方法 名 () ”的 方 
式 来 调用 对 象 的 方法 。 在 JavaScript 中 包含 了 一 些 常 用 的 对 象 ,例如 Array、Boolean、Date、 
Math、Number、String、Object 等 ,这 些 对 象 常用 在 客户 端 和 服务 器 端的 JavaScript 中 ,下 面 
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对 这 些 常用 对 象 做 简单 介绍 。 


1. Array 


数组 对 象 用 来 在 单独 的 变量 名 中 存储 一 系列 的 值 。 通 过 声明 一 个 数组 ,将 相关 的 数据 
存 人 数组 ,使 用 循环 等 结构 对 数组 中 的 每 个 元 素 进 行 操作 。 

1) 定义 数组 并 直接 初始 化 数组 元 素 

以 下 两 种 形式 都 可 以 用 来 声明 并 且 创 建 一 个 数组 元 素 已 经 初始 化 好 的 数组 对 象 , 在 这 
里 ,course 是 课程 数组 对 象 的 名 字 ,在 代码 中 可 以 通过 它 来 访问 里 面 的 每 个 元 素 , 例 如 

var course = new Array("C++ 程 序 设 计 ", "HTML 开发 基础 ", "数据 库 原理 ", "计算 机 网 络 "); 

var course = ["C++ 程 序 设 计 ", "HTML 开发 基础 ", "数据 库 原理 ", "计算 机 网 络 "]; 

2) 先 定义 数组 ,后 初始 化 数组 元 素 

前 面 在 声明 数组 的 同时 初始 化 了 数组 的 元 素 , 除 了 这 种 方式 外 还 可 以 先 声 明 并 创建 数 
组 对 象 ,然后 再 向 数组 中 指定 位 置 赋值 ,例如 : 


var course = new Array(); /* 先 定义 数组 * / 
courser[0] = "C++ 程 序 设 计 "; /* 给 数组 元 素 1 赋值 * / 
courser[1] = "HTML 开发 基础 "; /* 给 数组 元 素 2 赋值 * / 
courser[2] = "数据库 原理 "; /* 给 数组 元 素 3 赋值 * / 
courser[3] = "计算 机 网 络 "; /* 给 数组 元 素 4 赋值 */ 
3) 数组 的 长 度 


在 定义 数组 时 ,并 没有 规定 数组 的 长 度 ,也 就 是 没有 规定 这 个 数组 可 以 容纳 多 少 个 元 
素 。JavaScript 是 一 种 弱 类 型 的 语言 ,对 数组 长 度 没有 特别 的 限制 ,用 户 可 以 根据 需要 随时 
增加 或 减少 。 在 使 用 过 程 中 ,可 以 通过 数组 对 象 的 length 属性 来 获得 指定 数组 的 实际 长 
度 。 获 取 数 组 course 的 长 度 的 代码 如 下 : 


var len = course. length; /* len 的 值 为 4*/ 


4) 数组 的 元 素 

一 般 来 说 ,数组 中 存放 的 都 是 同 种 类 型 的 数据 ,如 字符 串 、 整 数 、 同 种 类 型 的 对 象 ,但 由 
于 JavaScript 是 一 种 弱 类 型 的 语言 ,不 检查 存 和 数组 的 每 个 元 素 的 类 型 是 否 一 致 (在 强 类 型 
的 语言 中 (如 C、C++) ,编译 器 会 自动 检查 元 素 类 型 是 否 一 致 ), 也 就 是 说 数组 元 素 可 以 不 
一 致 。 

作为 Web 前 端 开 发 人 员 ,在 编程 时 应 尽量 保证 数组 中 的 元 素 的 数据 类 型 相同 ,这 是 一 
种 良好 的 编程 习惯 。 

5) 访问 /修改 数组 元 素 

数组 的 元 素 可 以 通过 下 标 来 访问 。 数 组 的 下 标 总 是 从 0 开始 ,直到 数组 长 度 一 1 
结束 。 

6) 使 用 数组 对 象 的 属性 和 方法 

Array 对 象 最 常用 的 属性 是 length 属性 ,通过 它 可 以 获得 一 个 数组 的 长 度 。Array 对 
象 最 常用 的 方法 如 表 13-13 所 示 。 
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表 13-13 Array 对 象 的 方法 


方 ”法 说 明 
concat() 连接 两 个 或 更 多 的 数组 ,并 返回 结果 
join() 把 数组 的 所 有 元 素 放 人 一 个 字符 串 ,元素 通过 指定 的 分 隔 符 进行 分 隔 
reverse() 颠倒 数组 中 元 素 的 顺序 
pop() 删除 并 返回 数组 的 最 后 一 个 元 素 
push( 新 元 素 ) 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ,并 返回 新 的 长 度 
shift() 删除 并 返回 数组 的 第 一 个 元 素 
unshift() 向 数组 的 开头 添加 一 个 或 更 多 元 素 , 并 返回 新 的 长 度 
splice() 删除 元 素 ,并 向 数组 添加 新 元 素 
slice() 从 某 个 已 有 的 数组 返回 选 定 的 元 素 
sort() 对 数组 的 元 素 进行 排序 
toString() 把 数组 转换 为 字符 串 ,并 返回 结果 
toLocaleString() 把 数组 转换 为 本 地 数组 ,并 返回 结果 


2. Date 


在 Web 应 用 中 ,经 常 需要 处 理 与 时 间 和 日 期 相关 的 问题 。JavaScript 脚本 内 置 了 核心 
对 象 Date, 该 对 象 可 以 表示 从 毫秒 到 年 的 所 有 时 间 和 日 期 ,并 提供 了 一 系列 操作 时 间 和 日 


期 的 方法 。 
1) 生成 日 期 对 象 


Date 对 象 的 构造 函数 通过 可 选 的 参数 可 以 生成 表示 过 去 、 现 在 和 将 来 的 Date 对 象 。 


其 构造 方式 有 4 种, 分别 如 下 


var MyDate = new Date(); 

var MyDate = new Date(milliseconds); 

var MyDate = new Date(string); 

var MyDate = new Date(year,month, day,hours,minutes, seconds, milliseconds); 


2) 提取 日 期 各 字段 
根据 定义 对 象 的 方法 ,可 
供 了 获得 这 些 内 容 的 方法 ,如 


以 看 出 日 期 对 象 包括 年 月 日 时 分 秒 等 各 种 信息 ,Date 对 象 提 
表 13-14 所 示 。 


表 13-14 ”提取 日 期 对 象 每 个 字段 的 方法 


方 法 名 说 明 
getDate() 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1 一 31) 
getDay() 从 Date 对 象 返回 一 周 中 的 某 一 天 (0 一 6) 
getMonth() 从 Date 对 象 返回 月 份 (0 一 11) 
getFullYear() 从 Date 对 象 以 四 位 数字 返回 年 份 
getHours() 返回 Date 对 象 的 小 时 (0 一 23) 
getMinutes() 返回 Date 对 象 的 分 钟 (0 一 59) 
getSeconds() 返回 Date 对 象 的 秒 数 (0 一 59) 
getMilliseconds() 返回 Date 对 象 的 毫秒 (0 一 999) 


getTime() 


返回 1970 年 1 月 1 日 至 今 的 毫秒 数 


3) 将 日 期 转换 成 字符 串 
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Date 对 象 提 供 了 一 些 特 有 的 方法 将 日 期 转换 为 字符 串 ,而 不 需要 开发 人 员 编 写 专门 的 
函数 去 实现 该 功能 ,如 表 13-15 所 示 。 


表 13-15 ”将 日 期 转换 成 字符 串 的 方法 


方 法 名 


说 有明 


toString() 
toLocaleString() 
toLocaleTimeString() 
toLocaleDateString() 


把 Date 对 象 转换 为 字符 串 

根据 本 地 时 间 格 式 把 Date 对 象 转换 为 字符 串 
根据 本 地 时 间 格 式 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
根据 本 地 时 间 格 式 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 


3. Math 


Math 对 象 拥有 一 系列 的 属性 和 方法 ,能 够 进行 比 基 本 算术 运算 更 复杂 的 运算 ,但 Math 


对 象 的 所 有 属性 和 方法 都 是 
方法 。 
1) 使 用 Math 的 属性 
Math 的 属性 如 表 13-16 


静态 的 ,并 不 能 生成 对 象 的 实例 , 却 能 直接 访问 它 的 属性 和 


所 示 。 
表 13-16 Math 的 属性 


属 性 名 说 有明 
Math.E 返回 算术 常量 e, 即 自然 对 数 的 底数 ( 约 等 于 2.718) 
Math. LN2 返回 2 的 自然 对 数 ( 约 等 于 0. 693) 
Math. LN10 返回 10 的 自然 对 数 ( 约 等 于 2. 302) 
Math. LOG2E 返回 以 2 为 底 的 e 的 对 数 ( 约 等 于 1.414) 
Math. LOG10E 返回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0.434) 
Math. PI 返回 圆周 率 ( 约 等 于 3. 14159) 
Math. SQRT1_2 返回 2 的 平方 根 的 倒数 ( 约 等 于 0. 707) 
Math. SQRT2 返回 2 的 平方 根 ( 约 等 于 1. 414) 


2) 使 用 Math 的 方法 


Math 的 方法 如 表 13-17 所 示 。 
表 13-17 Math 的 方法 
方 法 名 说 有明 

Math. abs(z) 返回 数 的 绝对 值 

Math. sin(z) 返回 数 的 正弦 

Math. cos(x) 返回 数 的 余弦 

Math. tan(z) 返回 角 的 正切 

Math. acos(CZz) 返回 数 的 反 余弦 值 

Math. asin(z) 返回 数 的 反正 弦 值 


Math. atan(z) 
Math. atan2(zx,y) 


以 介 于 一 PI/2 和 PI/2 弧度 之 间 的 数值 返回 z 的 反正 切 值 
返回 从 X 轴 到 点 (z,y) 的 角度 ( 介 于 一 PI2 和 PI/2 弧度 之 间 ) 
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续 表 
方 法 名 说 有明 
Math. ceil(z) 对 数 进行 上 舍 和 人 ,返回 大 于 等 于 xz, 并 且 与 x 接近 的 整数 
Math. floor(z) 对 数 进行 下 舍 入 ,返回 小 于 等 于 zx, 并 且 与 x 接近 的 整数 
Math. round(z) 把 数 四 舍 五 人 为 最 接近 的 整数 
Math. random() 返回 0 一 1 之 间 的 随机 数 
Math. max(x,y) 返回 zx 和 > 中 的 最 高 值 
Math. min(z,y) 返回 z 和 > 中 的 最 低 值 
Math. sqrt(zx) 返回 数 的 平方 根 
Math. exp(z) 返回 e 的 指数 
Math. pow(Czyy) 返回 z 的 y 次 知 
Math. loge( zx) 返回 数 的 自然 对 数 ( 底 为 e) 


Math 对 象 提供 了 很 多 数学 方法 用 于 基本 运算 ,这 些 基本 运算 能 够 满足 Web 应 用 程序 
的 要 求 。 例 如 在 JavaScript 脚本 中 ,可 以 使 用 Math 对 象 的 random() 方 法 生成 0 一 1 的 随 
机 数 。 


4. Number 


Number 对 象 对 应 于 原始 数值 类 型 和 提供 数值 常数 的 对 象 ,JavaScript 会 自动 在 原始 数 
据 和 对 象 之 间 转 换 ,在 编程 时 无 须 考虑 创建 数值 对 象 ,直接 使 用 数值 变量 名 即 可 。Number 
对 象 常 用 的 方法 主要 有 下 面 两 个 。 

(1) toString(radix) : 直接 指定 进 制 将 数值 转换 为 字符 串 , 默 认为 十 进 制 。 

(2) toFixed(n): 将 Number 四 售 五 人 为 指定 元 位 小 数 点 的 数字 ,在 多 余 的 小 数位 被 抛 
弃 或 不 足 的 情况 下 后 面 补 0,n 可 以 是 0、 正 整数 。 


5. String 


String 对 象 是 与 原始 字符 串 数据 类 型 相对 应 的 JavaScript 内 置 对 象 ,属于 JavaScript 核 
心 对 象 之 一 ,主要 提供 诸多 方法 实现 字符 串 检查 .抽取 子 串 .字符 串 连接 .字符 串 分 割 等 与 字 
符 串 相关 的 操作 ,可 以 通过 以 下 方式 生成 String 对 象 ,例如 : 


var sl = "hello,world"; 


new String("hello, world"); 


var s2 


1) 获取 目标 字符 串 长 度 

字符 串 的 长 度 length 是 String 对 象 的 唯一 属性 , 且 为 只 读 属 性 , 它 返 回 目标 字符 串 ( 包 
含 字 符 串 中 的 空格 ) 所 包含 的 字符 数 。 

2) 连接 两 个 字符 串 

String 对 象 的 concat() 方 法 能 将 作为 参数 传人 的 字符 串 加 入 到 调用 该 方法 的 字符 串 的 
末尾 ,并 将 结果 返回 给 新 的 字符 串 。 

3) 字符 串 查找 

字符 串 对 象 提供 了 在 字符 串 内 查找 一 个 子 串 是 否 存在 的 方法 ,比较 常用 的 有 indexOfO 〇 和 
lastIndexOf() 方 法 。indexOf 方法 的 功能 是 返回 某 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 
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的 位 置 , 在 一 个 字符 串 中 的 指定 位 置 从 前 向 后 搜索 , 如 果 没 有 发 现 , 则 返回 一 1。 
lastIndexOf() 的 功能 是 返回 一 个 指定 的 字符 串 值 最 后 出 现 的 位 置 , 在 一 个 字符 串 中 的 指定 
位 置 从 后 向 前 搜索 ,如 果 没 有 发 现 , 则 返回 一 1。 

4) 字符 串 的 分 割 

split() 方 法 用 于 把 一 个 字符 串 分 割 成 字符 串 数 组 。 

5) 字符 串 的 显示 风格 

字符 串 对 象 还 提供 了 很 多 其 他 方法 ,可 以 修改 字符 串 在 Web 页 面 中 的 显示 风格 ,这 些 
方法 如 表 13-18 所 示 。 

表 13-18 ”字符 串 显 示 风 格 的 方法 


方 法 名 说 明 方 法 名 说 明 
blink() 显示 闪 动 的 字符 串 big() 使 用 大 字号 来 显示 字符 
bold() 使 用 粗 体 显示 字符 串 small() 使 用 小 字号 来 显示 字符 
fontcolor() 使 用 指定 的 颜色 来 显示 字符 串 strike() 使 用 删除 线 来 显示 字符 串 
fontsize() 使 用 指定 的 尺寸 来 显示 字符 串 sub() 把 字符 串 显示 为 下 标 
italics() 使 用 斜体 显示 字符 串 sup() 把 字符 串 显 示 为 上 标 


6) 字符 串 的 大 小 写 转换 
字符 串 对 象 提供 了 字符 串 中 的 字符 大 小 写 互 相 转换 的 方法 ,如 表 13-19 所 示 。 
表 13-19 字符 串 大 小 写 转换 的 方法 


方 法 名 说 明 
toLocaleLowerCase() 把 字符 串 按照 本 地 方式 转换 为 小 写 
toLocaleUpperCase() 把 字符 串 按照 本 地 方式 转换 为 大 写 
toLowerCase() 把 字符 串 转换 为 小 写 
toUpperCase() 把 字符 串 转换 为 大 写 


6. Boolean 


Boolean 对 象 是 对 应 原始 逻辑 数据 类 型 的 内 置 对 象 , 它 具 有 原始 的 Boolean 值 ,只 有 
true 和 false 两 个 状态 。 在 JavaScript 脚本 中 ,1 代表 true 状态 ,0 代表 false 状态 。 在 创建 
Boolean 对 象 时 可 以 用 以 下 语句 : 

Var booleanl 

var boolean2 

Boolean 对 象 主要 有 3 个 方法 ,分 别 是 toSource()、toString() 及 valueOf() 方 法 。 
toSource() 方 法 返回 表示 当前 Boolean 对 象 实例 创建 代码 的 字符 串 ; toString() 方 法 返回 当 
前 Boolean 对 象 实例 的 字符 串 (*true” 或 “false”); valueOf() 方 法 得 到 一 个 Boolean 对 象 实 
例 的 原始 Boolean 值 。 


new Boolean(value); 
Boolean(value); 


13.6.3 BOM 
在 实际 应 用 中 ,经 常 使 用 JavaScript 操作 浏览 器 窗口 以 及 窗口 上 的 控件 ,从 而 实现 用 户 
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和 页 面 的 动态 交互 。 因 而 浏览 器 预定 义 了 很 多 内 管 对 象 ,这 些 对 象 都 含有 相应 的 属性 和 方 
法 ,通过 这 些 属性 和 方法 控制 浏览 器 窗口 及 其 控件 。 


客户 端 浏 览 器 这 些 预 定义 的 对 象 统 称 为 浏览 器 对 象 ,按照 | window document 
某 种 层次 组 织 起 来 的 模型 统称 为 浏览 器 对 象 模型 (Browser 


Object Model,BOM)。 浏 览 器 对 象 模型 定义 了 浏览 器 对 象 的 history 


组 成 和 相互 关系 ,描述 了 浏览 器 对 象 的 层次 结构 ,是 Web 页 面 
中 内 置 对 象 的 组 织 形式 。 浏 览 器 对 象 的 模型 如 图 13-7 所 示 , 从 


location 


该 图 中 不 仅 可 以 看 到 浏览 器 对 象 的 组 成 ,还 可 以 看 到 不 同 对 象 navigator 


的 层次 关系 , window 对 象 是 顶层 对 象 , 包 含 了 history、 
document location screen navigator 及 frame 对 象 , 这 些 对 象 
都 含有 若干 属性 和 方法 ,使 用 这 些 属 性 和 方法 可 以 操作 Web 浏 
览 器 窗口 中 的 不 同 对 象 控制 和 访问 HTML 页 面 中 的 不 同 


内 容 。 


1. window 对 象 


screen 


昌 由 0 


frame 


图 13-7 浏览 器 对 象 模型 


window 对 象 位 于 浏览 器 对 象 模型 的 顶层 ,是 document、frame、location 等 对 象 的 父 类 。 
在 实际 应 用 中 ,只 要 打开 浏览 器 ,无 论 是 否 存在 页 面 , window 对 象 都 将 被 创建 。 由 于 
window 对 象 是 所 有 对 象 的 顶层 对 象 ,所 以 按照 对 象 层 次 访问 某 一 个 对 象 时 不 必 显 式 地 注 


明 window 对 象 。 


window 对 象 内 置 了 许多 方法 供用 户 操 作 , 下 面 列 出 最 常用 的 window 对 象 的 方法 ,如 


表 13-20 所 示 。 


表 13-20 window 对 象 的 方法 


方 法 名 


说 明 


alert(message) 

confirm( question) 

open(url, name,features, replace) 
prompt(" 提 示 信 息 ", "默认 值 ") 
blurO) 

close() 

focus() 
setInterval(code,interval) 
setTimeout(code, delay) 
clearInterval(intervalID) 
clearTimeout(timeoutID) 


显示 带 有 一 段 消息 和 一 个 确认 按钮 的 告警 框 

显示 带 有 一 段 消息 以 及 确认 按钮 和 取消 按钮 的 对 话 框 
打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
显示 可 提示 用 户 输入 的 对 话 框 

把 键盘 焦点 从 顶层 窗口 移 开 

关闭 浏览 器 窗口 

把 键盘 焦点 给 予 一 个 窗口 

按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 
在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 

取消 由 setInterval() 设 置 的 timeout 

取消 由 setTimeout() 方 法 设置 的 timeout 


window 对 象 提供 有 3 种 用 于 客户 与 页 面 交互 的 对 话 框 , 分 别 是 告警 框 、 确 认 框 和 提 


示 框 。 


2. navigator 对 象 


navigator 对 象 用 于 获取 用 户 浏 览 器 的 相关 信息 。 该 对 象 是 以 Netscape Navigator 命 
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名 的 ,在 Navigator 和 Internet Explorer 中 都 得 到 了 支持 。navigator 对 象 包含 若干 属性 , 主 
要 用 来 描述 浏览 器 的 信息 ,但 不 同 浏览 器 所 支持 的 navigator 对 象 的 属性 是 不 同 的 ,常用 的 
属性 如 表 13-21 所 示 。 


表 13-21 navigator 对 象 的 属性 


属 性 名 说 明 
appName 返回 浏览 器 的 名 称 
appVersion 返回 浏览 器 的 平台 和 版 本 信息 
platform 返回 运行 浏览 器 的 操作 系统 平台 
systemLanguage 返回 操作 系统 使 用 的 默认 语言 
user Agent 返回 由 客户 机 发 送 服务 器 的 user-Agent 头 部 的 值 
appCodeName 返回 浏览 器 的 代码 名 


另外 ,navigator 对 象 还 支持 一 系列 的 方法 ,与 属性 一 样 , 不 同 浏览 器 支持 的 方法 也 不 完 
全 相同 。 其 常用 的 方法 如 表 13-22 所 示 。 


表 13-22 navigator 对 象 的 方法 


方 法 名 说 明 
taintEnabled() 规定 浏览 器 是 否 启 用 数据 污点 (data tainting) 
JavaEnabled() 规定 浏览 器 是 否 启用 Java 
preference() 查询 或 者 设置 用 户 优先 级 ,该 方法 只 能 用 在 Navigator 浏览 器 中 
savePreference() 保存 用 户 的 优先 级 ,该 方法 只 能 用 在 Navigator 浏览 器 中 
3. screen 对 象 


screen 对 象 用 于 获取 用 户 屏幕 设置 的 相关 信息 ,主要 包括 显示 尺寸 和 可 用 颜色 的 数量 
信息 。 表 13-23 中 给 出 了 screen 对 象 的 常用 属性 ,这些 属性 得 到 了 各 种 浏览 器 的 普遍 支持 。 


表 13-23 screen 对 象 的 方法 


方 法 名 说 明 

availWidth 返回 可 用 的 屏幕 宽度 
availHeight 返回 可 用 的 屏幕 高 度 
height 返回 显示 屏幕 的 高 度 
width 返回 显示 屏幕 的 宽度 


在 浏览 器 窗口 打开 的 时 候 , 可 以 通过 screen 对 象 的 属性 来 获取 屏幕 设置 的 相关 信息 。 
4. history 对 象 


history 对 象 表示 窗口 的 浏览 历史 .并 由 window 对 象 的 history 属性 引用 该 窗口 的 
history 对 象 。history 对 象 是 一 个 数组 ,其 中 的 元 素 存 储 了 浏览 历史 中 的 URL ,用 来 维护 在 
Web 浏览 器 当前 会 话 内 所 有 曾经 打开 的 历史 文件 列表 。history 对 象 有 3 个 常用 方法 ,如 
表 13-24 所 示 。 
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表 13-24 ”history 对 象 的 方法 及 说 明 


方 法 名 说 明 
forward() 加 载 history 列表 中 的 下 一 个 URL 
back() 加 载 history 列表 中 的 前 一 个 URL 


goCnumber|URL) ”加 载 history 列表 中 的 某 个 具体 页 面 。URL 参数 指定 要 访问 的 URL,number 参数 
指定 要 访问 的 URL 在 history 的 URL 列表 中 的 位 置 


history 对 象 的 这 3 个 方法 与 浏览 器 软件 中 的 [后退] 和 【前 进 ] 按 钮 的 功能 一 致 。 需 要 
注意 的 是 ,如 果 没 有 使 用 过 [后退] 按钮 或 跳 转 菜单 在 历史 记录 中 移动 ,而 且 JavaScript 没有 
调用 history. back() 或 histroy. go() 方 法 ,那么 调用 history. forward() 方 法 不 会 产生 任何 效 
果 , 因 为 浏览 器 已 经 处 在 URL 列表 的 尾部 ,没有 可 以 前 进 访问 的 URL 了 。 

5. location 对 象 

location 对 象 用 来 表示 浏览 器 窗口 中 加 载 的 当前 文档 的 URL, 该 对 象 的 属性 说 明了 
URL 中 的 各 个 部 分 。location 对 象 的 常用 属性 如 表 13-25 所 示 。 

表 13-25 location 对 象 的 属性 


属 性 名 说 明 

href 设置 或 返回 完整 的 URL 

host name 设置 或 返回 URL 中 的 主机 名 

protocol 设置 或 返回 当前 URL 的 协议 

port 设置 或 返回 当前 URL 的 端口 号 

pathname 设置 或 返回 当前 URL 的 路 径 部 分 

host 设置 或 返回 URL 中 的 主机 名 和 端口 号 的 组 合 


通过 设置 location 对 象 的 属性 可 以 修改 对 应 的 URL 部 分 ,而 且 一 旦 location 对 象 的 属 
性 发 生变 化 ,相当 于 生成 了 一 个 新 的 URL. 浏 览 器 便 会 尝试 打开 新 的 URL。 虽 然 可 以 通过 
改变 location 对 象 的 任何 属性 加 载 新 的 页 面 ,但 是 一 般 不 建议 这 么 做 ,正确 的 方法 是 修改 
location 对 象 的 href 属性 ,将 其 设置 为 一 个 完整 的 URL 地址 ,从 而 实现 加 载 新 页 面 的 功能 。 

location 对 象 和 document 对 象 的 location 属性 是 不 同 的 ,document 对 象 的 location 属 
性 是 一 个 只 读 字符 串 , 不 具备 location 对 象 的 任何 特性 ,所 以 不 能 通过 修改 document 对 象 
的 location 属性 实现 重新 加 载 页 面 的 功能 。 

location 对 象 除了 上 面 所 述 的 属性 外 ,还 有 3 个 常用 的 方法 ,用 于 实现 对 浏览 器 位 置 的 
控制 ,如 表 13-26 所 示 。 


表 13-26 location 对 象 的 方法 


方法 名 说 明 
reload() 重新 加 载 当前 文档 
assign() 加 载 新 文档 


replace() 


用 新 的 文档 替换 当前 文档 
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13.6.4 DOM 
1. DOM 简介 


document 对 象 是 客户 端 JavaScript 最 常用 的 对 象 之 一 ,在 浏览 器 对 象 模型 中 , 它 位 于 
window 对 象 的 下 一 层级 。document 对 象 包含 一 些 简单 的 属性 ,提供 了 有 关 浏览 器 中 显示 
文档 的 相关 信息 ,例如 该 文档 的 URL、 字 体 颜色 ,修改 日 期 等 。 男 外 ,document 对 象 还 包含 
一 些 引 用 数组 的 属性 ,这 些 属性 可 以 代表 文档 中 的 表单 图像、 链接 、 锚 以 及 applet。 和 其 他 
对 象 一 样 ,document 对 象 还 定义 了 一 系列 的 方法 ,通过 这 些 方法 可 以 使 JavaScript 在 解析 
文档 时 动态 地 将 HTML 文本 添加 到 文档 中 。 

正 是 由 于 document 对 象 特 有 的 重要 性 ,所 以 从 它 出 现 开始 就 在 不 停 地 扩展 。 遗 憾 的 是 ， 
一 开始 document 对 象 的 扩展 并 没有 统一 的 规范 ,不 同 的 浏览 器 有 不 同 的 定义 ,而 且 彼 此 不 兼 
容 。 为 了 解决 不 兼容 带 来 的 问题 ,万维网 联盟 (W3C) 制 定 了 一 种 规范 ,目的 是 创建 一 个 通用 的 
文档 对 象 模型 (Document Object Model,DOMD) ,得 到 所 有 浏览 器 的 支持 。DOM 也 是 一 个 发 
展 中 的 标准 , 它 指 定 了 JavaScript 等 脚本 语言 访问 和 操作 HTML 或 者 XML 文档 各 个 结构 
的 方法 , 随 着 技术 的 发 展 和 需求 的 变化 ,DOM 中 的 对 象 . 属 性 和 方法 也 在 不 断 变化 。 

DOM 的 设计 是 以 对 象 管 理 组 织 (OMG) 的 规约 为 基础 的 ,因此 可 以 用 于 任何 编程 语言 。 
最 初 人 们 把 它 认 为 是 一 种 让 JavaScript 在 浏览 器 间 进 行 移植 的 方法 ,不 过 DOM 的 应 用 已 
经 远 远 超出 这 个 范围 。DOM 技术 使 得 用 户 页 面 可 以 动态 地 变化 ,例如 可 以 动态 地 显示 或 
隐藏 一 个 元 素 ,改变 元 素 的 属性 、 增 加 一 个 元 素 等 ,DOM 技术 使 得 页 面 的 交互 性 大 大 增强 。 


2. DOM 节点 树 


DOM 是 一 种 在 加 载 Web 页 面 时 由 浏览 器 创建 的 HTML 文档 模型 。 页 面 按照 规则 由 
一 html 二 一 body 二 二 form 之 和 一 input 二 等 标记 组 成 规范 文档 ,这 些 标记 之 间 存 在 着 一 定 
的 关系 ,例如 二 body 二 被 一 html 二 包含 ,而 二 form 二 标记 又 被 包含 在 一 body 二 内 ,这 些 页 面 
元 素 好 像 倒 垂 的 一 棵 树 一 样 ,而 顶端 就 是 二 html> ,我 们 把 这 种 描述 页 面 标记 关系 的 树 形 结 
构 称 为 DOM 节点 树 ( 文 档 树 ) ,如 图 13-8 所 示 。 


3. DOM 节点 


根据 HTML DOM 规范 ,HTML 文档 中 的 每 个 成 分 都 是 一 个 节点 ,具体 的 规定 如 下 : 

。 整个 文档 是 一 个 文档 节点 。 

。 每 个 HTML 标记 是 一 个 元 素 节点 。 

。 包含 在 HTML 元 素 中 的 文本 是 文本 节点 。 

。 每 一 个 HTML 属性 是 一 个 属性 节点 。 

。 注释 属于 注释 节点 。 

从 DOM 约束 中 可 以 看 出 每 一 个 节点 对 应 一 个 对 象 ,代表 该 页 面 上 的 某 个 元 素 。 对 象 
document 实际 上 就 是 该 页 面 上 所 有 页 面 元 素 对 象 的 集合 .通过 document 对 象 可 以 访问 页 
面 中 的 所 有 元 素 。DOM 上 的 每 个 节点 彼此 都 有 等 级 关系 ,并 且 每 个 节点 都 包含 着 关于 自 
身 的 大 量 信息 。 一 个 网 页 最 外 层 的 标记 是 二 html 二 标记 , 它 也 是 页 面 所 有 元 素 的 根 ,通过 
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html 
1 1 
head boby 
让 一 一 1 
form 
title script i 
table 
1 1 1 1 
tr tr tr tr 
CH | 
td |ltdliudlltd lltid ltdlltdlltdllud td 
| | 1 
input input input || input input | 


图 13-8 DOM 节点 树 
document 对 象 的 documentElement 属性 可 以 获得 ,例如 : 
Var root = document. documentElement; 
由 一 个 节点 分 出 的 下 一 个 层次 的 节点 称 为 * 子 节点 ”, 而 该 节点 称 为 “ 父 节 点 ”, 即 节点 之 
间 是 一 种 父子 关系 。 在 图 13-8 中 head 节点 就 是 title 节点 的 父 节 点 ,而 title 节点 是 head 节 
点 的 子 节点 。 任 何 节 点 都 可 以 通过 数组 属性 childNodes 获得 自己 的 子 节点 ,例如 : 
var aNodeList = root.childNodes; 
一 个 节点 的 子 节点 还 可 以 通过 节点 的 firstChild 和 lastChild 属性 获得 它 的 第 一 个 和 最 
后 一 个 子 节点 。DOM 规定 一 个 页 面 只 有 一 个 根 节点 , 根 节点 是 没有 父 节点 的 , 除 此 之 外 ， 
其 他 节点 都 可 以 通过 parentNodes 属性 获得 自己 的 父 节点 ,例如 : 
var parentNode = bNode. parentNode; 
同一 父 节 点 下 位 于 同一 层次 的 节点 称 为 "兄弟 节点 ”。 在 图 13-8 中 head 节点 下 的 子 节 
点 title 节点 以 及 script 节点 就 互 为 "兄弟 节点 ”。 从 DOM 树 中 可 以 看 出 根 节点 没有 父 节 
点 ,而 最 末端 的 节点 没有 子 节点 。 不 同 节点 对 应 的 HTML 元 素 是 不 同 的 ,因此 节点 有 不 同 
类 型 。 文 档 树 中 的 每 个 节点 对 象 都 有 nodeType 属性 ,该 属性 返回 节点 的 类 型 ,常用 的 节点 
类 型 及 其 说 明 如 表 13-27 所 示 。 
表 13-27 常用 的 节点 类 型 及 说 明 


节点 类 型 nodeType 值 说 明 

Document 9 文档 节点 ,表示 当前 文档 

Element 1 元 素 节点 ,表示 文档 中 的 HTML 元 素 
Text 3 文本 节点 ,表示 文档 中 的 文本 内 容 
Comment 8 注释 节点 ,表示 文档 中 的 注释 内 容 

Attr 2 属性 节点 ,表示 文档 中 HTML 元 素 的 属性 
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从 表 13-27 中 可 以 看 出 ,如 果 某 个 节点 的 nodeType 的 值 为 9, 则 说 明 该 节点 对 象 是 一 
个 Document 对 象 ,如 果 某 个 节点 的 nodeType 值 为 1, 则 说 明 节 点 对 象 是 一 个 Element 对 
象 。 不 同类 型 的 节点 还 可 以 包含 其 他 类 型 的 节点 ,相互 连接 在 一 起 构成 了 一 个 完整 的 树 形 
结构 。 对 于 大 多 数 HTML 文档 来 说 ,元 素 节点 ,文本 节点 和 属性 节点 是 必 不 可 少 的 。 

1) 元 素 节点 (Element Node) 

元 素 节点 构成 了 DOM 基础 。 在 文档 结构 中 ,过 html>、 志 head>、 二 body>、 王 hi>、 
去 p 之 和 去 则 > 等 标记 都 是 元 素 节点 。 各 种 标记 提供 了 元 素 的 名 称 ,如 文本 段落 元 素 的 名 称 
是 p、 无 序列 表 元 素 的 名 称 是 ul 等 。 元 素 可 以 包含 其 他 元 素 , 也 可 以 被 其 他 元 素 包含 。 
图 13-8 显示 了 这 种 包含 与 被 包含 的 关系 , 唯 独 html 元 素 没 有 被 其 他 元 素 包含 ,因为 它 是 根 
元 素 , 代 表 整 个 文档 。 

2) 文本 节点 (Text Node) 

元 素 节点 只 是 节点 树 中 的 一 种 类 型 ,如 果 文 档 完全 由 元 素 组 成 ,那么 这 个 文档 本 身 将 不 
包含 任何 信息 ,因此 文档 结构 也 就 失去 了 存在 的 价值 。 在 HTML 文档 中 ,文本 节点 包含 在 


3) 属性 节点 (Attribute Node) 

元 素 一 般 都 会 包含 一 些 属性 ,属性 的 作用 是 对 元 素 做 出 更 具体 的 描述 。 例 如 ,一 般 元 素 
都 有 title 属性 ,该 属性 能 够 对 元 素 进行 详细 的 描述 或 说 明 ,以 使 用 户 清楚 该 元 素 的 用 途 、 作 
用 或 功能 。 


4. DOM 节点 的 访问 


访问 节点 的 方式 有 很 多 ,可 以 通过 document 对 象 的 方法 访问 节点 ,也 可 以 通过 元 素 节 
点 的 属性 访问 节点 。 有 具体 的 访问 节点 的 方式 如 下 : 
1) 通过 getElementById() 方 法 访问 节点 
通过 document 对 象 的 getElementById() 方 法 可 以 访问 页 面 中 的 节点 ,在 使 用 该 方法 
时 必须 指定 一 个 目标 元 素 的 id 作为 参数 。 
语法 : 
var s = document.getElementById("id" ); 
在 使 用 该 方法 时 需要 注意 以 下 两 点 : 
。 id 为 必 选 项 ,对 应 于 页 面 元 素 属性 id 的 属性 值 ,类 型 为 字符 串 型 。 在 设计 页 面 时 最 
好 给 每 一 个 需要 交互 的 元 素 设 定 一 个 唯一 的 id, 以 便 查 找 。 
。 该 方法 返回 的 是 一 个 页 面 元 素 的 引用 ,如 果 页 面 上 出 现 了 不 同 元 素 使 用 同一 个 id 
的 情况 , 则 该 方法 返回 的 只 是 第 一 个 找到 的 页 面 元 素 ; 如 果 给 定 的 id 没有 找到 对 应 
的 元 素 , 则 返回 null。 
2) 通过 getElementsByName() 方 法 访问 节点 
除了 可 以 通过 一 个 页 面 元 素 的 id 得 到 该 对 象 的 引用 外 ,在 程序 中 还 可 以 通过 名 字 访 问 
页 面 元 素 。 
语法 : 


var s = document.getElementsByNane("name" ); 
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在 使 用 该 方法 时 需要 注意 以 下 两 点 : 
。 name 为 必 选 项 ,对 应 于 页 面 元 素 属 性 name 的 属性 值 , 类 型 为 字符 串 型 。 该 方法 在 
调用 时 返回 的 是 一 个 数组 ,即使 对 应 于 该 名 字 的 元 素 只 有 一 个 。 
。 如 果 指 定名 字 ,在 页 面 中 没有 相应 的 元 素 存在 , 则 返回 一 个 长 度 为 0 的 数组 ,在 程序 
中 可 以 通过 判断 数组 的 length 属性 值 是 否 为 0 来 判断 是 否 找到 了 对 应 的 元 素 。 
3) 通过 getElementsByTagName() 方 法 访问 节点 
除了 可 以 通过 一 个 页 面 元 素 的 id 和 name 获得 对 应 的 元 素 外 ,还 可 以 通过 指定 的 标记 
名 称 获得 页 面 上 所 有 这 一 类 型 的 元 素 。 
语法 : 
var s = document.getElementsByTagName(tagname); 
在 使 用 该 方法 时 需要 注意 以 下 两 点 : 
。 tagname 为 必 选 项 ,对 应 于 页 面 元 素 的 类 型 ,是 字符 串 型 的 数据 。 该 方法 在 调用 时 
返回 的 是 一 个 数组 ,即使 页 面 中 对 应 于 该 类 型 的 元 素 只 有 一 个 。 
。 可 以 通过 判断 数组 的 length 属性 值 来 获知 页 面 上 有 和 多少 个 对 应 于 该 类 型 的 元 素 。 
4) 通过 form 元 素 访 问 节点 
form 元 素 是 HTML 程序 提供 给 用 户 向 系统 输入 数据 的 重要 对 象 ,如 果 要 获得 页 面 的 
form 对 象 ,除了 可 以 通过 前 面 的 getElementById() 、getElementByName() 方 法 获得 外 ,还 
可 以 通过 document 对 象 的 forms 属性 获得 这 个 form 对 象 。 


(3;7 综合 应 用 


13.7.1 显示 时 间 特 效 
利用 JavaScript 制作 动态 显示 系统 时 间 效 果 , 页 面 代码 如 下 ; 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 

< html xmlns = "http://www. w3. org/1999/xhtm]l"> 
< HEAD> 

<TITLE > 显示 时 间 特 效 </TITLE > 

</HEAD> 

<BODY> 

< script language = JavaScript > 

today = new Date( ); 

function initArray(){ 

this. length = initArray. arguments. length 
for(var i=0;i<this. length;i++) 

this[i+1] = initArray. arguments[i] } 

var d= new initArray( 

"星期 日 "， 

"星期 一 "， 

"星期 二 "， 

"星期 三 "， 

"星期 四 "， 
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"星期 五 "， 

"星期 六 "); 

document. write( 

"< font color = 并 并 000000 style= 'font - size:9pt;font- fanily: 宋体 > "， 
today. getYear( ), "年 ", 
today. getMonth() +1," 月 ", 
today. getDate(), "日 "， 
d[today. getDay() +1], 
"</font >" ); 

</script> 

</BODY > 

</HTML > 


显示 效果 如 图 13-9 所 示 。 


2015 年 9 月 6 日 星期 日 
图 13-9 动态 显示 系统 时 间 效果 


13.7.2 图 片 特效 
利用 JavaScript 制作 图 片 光 感 效果 ,代码 如 下 : 


<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 

< html xmlns = "http://www.w3.org/1999/xhtml"> 

< HEAD> 

< TITLE > 图 片 特 效 </TITLE> 

</HEAD> 

<body> 

< SCRIPT LANGUAGE = "JavaScript"> 

i=0; 

function f_wave() 

{i=i-—4; 

ShowCool. style. filter = "Wave(Freq = 1,LightStrength= 20,Phase=" + i + ")"; 
setTimeout("f_wave()",100); 

} 

window. onload = f_wave;</SCRIPT > 

< IMG SRC = "01. jpg. jpg" WIDTH = "400" HEIGHT = "300" ID = ShowCool > 

</BODY > 

</HTML > 


效果 如 图 13-10 所 示 。 


图 13-10 图 片 光 感 效果 


本 章 学 习 目 标 : 

了 解 Ajax 的 功能 、 特 点 。 

名 了 解 Ajax 的 原理 。 

名 掌握 Ajax 中 JSON 的 应 用 。 


(14,1 Ajax 概述 


Ajax 是 Asynchronous JavaScript And XML( 异 步 JavaScript 及 XML) 的 缩写 ,2005 年 
由 Adaptive Path 公司 的 Jesse James Garrett 首先 提出 。Ajax 被 广泛 用 于 大 量 B/S 结构 的 
应 用 中 ,改进 了 传统 的 Web 应 用 ,给 浏览 者 一 种 更 连续 的 体验 。Ajax 的 最 大 优势 在 于 异步 
交互 , 即 用 户 在 浏览 页 面 时 可 同时 向 服务 器 发 送 请 求 , 甚 至 可 以 不 用 等 待 前 一 次 请 求 得 到 完 
全 响应 便 再 次 发 送 请 求 , 这 种 异步 请 求 的 方式 非常 类 似 于 传统 的 桌面 应 用 。 通 过 使 用 Ajax 
技术 可 以 使 互联 网 网 页 具有 更 友好 的 人 机 交互 和 更 美观 的 界面 。 

使 用 Ajax 的 异步 请 求 方式 ,浏览 器 无 须 频繁 地 重新 加 载 新 页 面 ,服务 器 的 响应 不 再 是 
整个 页 面 内 容 , 而 只 是 必须 更 新 的 部 分 数据 。Ajax 可 以 减轻 服务 器 和 带宽 的 负担 ,提供 更 
好 的 服务 响应 。 使 用 Ajax 的 异步 模式 ,浏览 器 无 须 重新 加 载 整个 页 面 就 可 以 显示 新 的 数 
据 。 浏 览 器 通过 JavaScript 代码 向 服务 器 发 送 请 求 ,JavaScript 代码 负责 解析 服务 器 的 响应 
数据 ,并 把 样式 表 加 到 数据 上 ,然后 在 现 有 网 页 中 显示 出 来 。 

Ajax 技术 是 Web 2.0 的 核心 技术 ,现在 已 经 很 难 找到 一 个 没有 使 用 Ajax 技术 的 Web 
应 用 。 


1. 为 什么 使 用 Ajax 


在 Ajax 中 采用 的 是 一 系列 已 有 的 甚至 是 老 旧 的 技术 ,把 它们 重新 组 织 , 扩 展 原 有 的 概 
念 ,让 用 户 可 以 应 对 客户 端 程序 所 面 对 的 复杂 问题 。 

早期 的 Web 应 用 程序 主要 基于 HTTP 协议 ,主要 内 容 是 文档 和 超 链 接 。 用 户 通过 单 
击 超 链接 进入 一 个 个 文档 ,实现 系统 的 功能 。 每 一 次 单 击 都 会 引起 一 次 页 面 的 刷新 ,一 次 页 
面 的 刷新 就 意味 着 一 次 客户 端 与 服务 器 端的 通信 ,网 络 通信 是 一 件 代价 很 高 昂 的 事情 ,很 可 
能 会 产生 网 络 延迟 。 大 量 的 远程 调用 会 把 系统 拖 慢 , 使 用 户 觉察 到 延迟 ,导致 用 户 体验 很 差 。 

Ajax 技术 采用 异步 交互 的 方式 解决 网 络 延迟 造成 的 用 户 界面 阻塞 问题 ,从 而 达到 提高 
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用 户 体验 的 目的 。Ajax 技术 的 最 大 特点 是 : 
(1) 页 面 局 部 更 新 ,不 会 导致 整个 页 面 完全 刷新 。 
(2) 很 好 的 用 户 体验 。 


2. Ajax 的 应 用 


当前 很 多 Web 应 用 都 采用 了 Ajax 技术 ,例如 Google 公司 的 Gmail、Google Maps 和 
Microsoft 公司 的 Hotmail 等 ,下 面 通过 Google Maps 应 用 来 看 一 下 Ajax 的 应 用 。 

Google Maps 结合 了 地 图 浏览 和 搜索 引擎 的 功能 ,这 个 地 图 可 以 自由 地 通过 文本 来 查 
询 并 且 精 确 地 细 化 到 街道 地 址 和 生活 设施 。Google Maps 的 地 图 支持 鼠标 的 拖 动 ,放大 和 
缩小 。 地 图 是 由 很 多 小 块 的 图 片 拼接 而 成 的 ,如 果 用 户 滚 动 得 很 远 ,会 出 现 一 些 空白 区 域 ， 
这 些 区 域 的 图 片 会 延 时 加 载 。 这 个 延 时 很 明显 ,可 以 观察 到 起 初 它们 是 一 些 空白 区 域 , 当 它 
们 被 加 载 时 会 一 块 一 块 地 显示 出 来 。 值 得 注意 的 是 ,这 种 数据 的 加 载 都 是 在 地 图 的 某 些 区 
域 进行 的 ,而 不 是 整个 页 面 在 加 载 。 

当 使 用 鼠标 单 击 地 图 上 的 地 名 时 ,地 图 上 出 现 该 地 点 的 详细 介绍 ,注意 到 这 种 操作 并 不 
会 引起 页 面 的 刷新 ,如 图 14-1 所 示 。 
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图 14-1 Google Maps 操作 效果 


[4.2 Ajax 原理 


Ajax 基本 上 把 JavaScript 技术 和 XMLHttpRequest 对 象 放 在 Web 表单 和 服务 器 之 
间 。 当 用 户 填 写 表单 时 ,数据 发 送 给 一 些 JavaScript 代码 而 不 是 直接 发 送 给 服务 器 。 


14.2.1 Ajax 的 组 成 部 分 


Ajax 不 只 是 一 种 技术 ,实际 上 它 是 由 几 种 蓬勃 发 展 的 技术 以 新 的 强大 方式 组 合 而 成 ， 
Ajax 包含 以 下 组 成 部 分 。 
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(1) HTML 和 DOM: 浏览 器 将 HTML 页 面 组 织 成 DOM 对 象 , Ajax 程序 可 以 使 用 
DOM 有 效 地 重 绘 页 面 中 的 部 分 内 容 。 

(2) CSS: Ajax 程序 可 以 使 用 CSS 修改 用 户 界面 的 外 观 。 

(3) XML 和 JSON: 用 于 在 客户 端 和 服务 器 之 间 传 递 数 据 。XML 是 标准 的 数据 表示 
格式 ,JSON(JavaScript Object Notation) 在 客户 端 有 着 优良 的 性 能 ,可 以 减少 网 络 流量 。 

(4) XMLHttpRequest: Ajax 的 核心 部 分 ,允许 开发 者 在 JavaScript 中 以 异步 方式 向 服 
务 器 发 出 HTTP 请 求 并 得 到 响应 。 

(5) JavaScript: JavaScript 将 以 上 技术 结合 在 一 起 。 

Ajax 的 各 部 分 组 织 结构 如 图 14-2 所 示 。 


EC 
文档 对 象 模型 (DOM) ~、 
要 


图 14-2 Ajax 组 织 结构 图 


图 14-2 所 示 为 Ajax 各 组 成 元 素 在 浏览 器 和 Web 服务 器 进行 交互 的 过 程 中 所 起 作用 
的 描述 。 页 面 被 浏览 器 组 织 成 DOM 形式 ,CSS 影响 页 面 的 样式 ,JavaScript 控制 DOM 和 
CSS, 通 过 XMLHttpRequest 对 象 与 Web 服务 器 进行 Ajax 交互 ,数据 格式 可 以 是 XML 或 
JSON 格式 ,甚至 是 普通 文本 格式 。 


14.2.2 传统 Web 应 用 和 Ajax 应 用 


传统 Web 应 用 和 Ajax 应 用 的 主要 区 别 在 于 传统 Web 应 用 采用 同步 方式 与 服务 器 端 
交流 内 容 , 而 Ajax 应 用 通过 异步 方式 与 服务 器 端 交流 数据 。 

传统 的 Web 应 用 模式 采用 的 是 同步 方式 与 服务 器 端 交 流 , 用 户 的 体验 是 割裂 的 , 即 单 
击 一 等 待 一 看 到 新 的 页 面 一 再 单 击 一 再 等 待 。 在 采用 了 Ajax 技术 之 后 ,采用 异步 方式 与 服 
务 器 端 交 流 数据 ,大 部 分 的 计算 工作 都 是 在 用 户 不 察觉 的 情况 下 交 由 服务 器 去 完成 ,不 影响 
用 户 界面 的 响应 ,另外 没有 空白 的 屏幕 ,没有 让 人 心烦 的 旋转 地 球 , 没 有 虚假 的 下 载 百 分 比 
进度 条 ,用 户 体验 相对 于 传统 Web 应 用 有 很 大 的 提高 。 

传统 的 Web 应 用 与 Ajax 应 用 的 不 同 还 体现 在 两 者 与 服务 器 端 交 流 的 内 容 上 。 传 统 
Web 应 用 向 服务 器 端 发 出 HTTP 请 求 , 从 服务 器 端 得 到 HTML 页 面 作为 响应 。Ajax 应 用 
也 是 向 服务 器 端 发 出 HTTP 请 求 , 但 从 服务 器 端 得 到 的 响应 只 是 要 改变 数据 ,数据 的 格式 
一 般 是 XML 或 者 JSON。 


(14,3 应 用 Ajax 的 步骤 


下 面 通过 一 个 实例 来 展示 Ajax 各 部 分 的 使 用 。 在 Ajax 的 各 种 技术 组 成 中 ,最 重要 的 
是 XMLHttpRequest 对 象 ,通过 该 对 象 实现 与 服务 器 端的 异步 交互 。 开 发 一 个 Ajax 应 用 
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的 一 般 步骤 如 下 : 
。 初始 化 XMLHttpRequest 对 象 ; 
。 设置 XMLHttpRequest 对 象 的 onreadstatechange 属性 ,指定 服务 器 返回 响应 数据 
时 要 调用 的 回调 函数 ; 
。 调用 XMLHttpRequest 对 象 的 open 方法 ,创建 HTTP 请 求 ; 
。 处 理 服务 器 返回 的 信息 。 


1. 初始 化 XMLHttpRequest 对 象 


Ajax 的 核心 是 JavaScript 对 象 XMLHttpRequest。 该 对 象 不 是 浏览 器 中 DOM 的 标准 
扩展 ,该 对 象 在 Internert Explorer 5 中 首次 引入 , 它 提供 了 异步 发 送 请 求 的 能 力 。 后 来 ,其 
他 浏览 器 厂商 也 实现 了 类 似 的 功能 对 象 ,使 得 XMLHttpRequest 对 象 成 为 事实 上 的 行业 标 
准 。 使 用 XMLHttpRequest 可 以 通过 JavaScript 向 服务 器 发 送 请 求 ,并 能 够 处 理 服务 器 响 
应 ,避免 阻塞 用 户 动作 。 通 过 使 用 XMLHttpRequest 对 象 , 浏 览 器 通过 客户 端 脚本 与 服务 
器 交换 数据 ,Web 页 面 无 须 频繁 重新 加 载 ,Web 页 面 的 内 容 也 由 客户 端 脚 本 动态 更 新 。 

为 了 让 JavaScript 可 以 向 服务 器 发 送 HTTP 请 求 , 必 须 使 用 XMLHttpRequest 对 象 。 
在 使 用 前 ,要 先 将 XMLHttpRequest 对 象 初始 化 、 实 例 化 。 各 个 浏览 器 对 XMLHttpRequest 对 
象 的 创建 方式 不 尽 相同 。 

在 Mozilla Firefox 浏览 器 中 通过 以 下 代码 完成 初始 化 : 


var xmlhttp = new XMLHttpRequest( ); 


Microsoft 公司 的 Internet Explorer 中 以 ActiveXObject 控件 的 形式 提供 ,初始 化 代码 
如 下 : 


var xmlhttp = new ActiveXObject("Microsoft. XMLHTTP"); 
下 面 的 代码 以 一 种 更 通用 (能 实现 跨 浏览 器 访问 ) 的 方式 创建 XMLHttpRequest 对 象 : 


// 得 到 xmlHttp 对 象 
function loadXmlHttp(){ 
if (window. XMLHttpRequest){ //IE 7 Mozilla .Safari 
xmlHttp = new XMLHttpRequest( ); 
} 
else if(window. ActiveXObject){ 
try( 
xmlHttp = new ActiveXObject ("Microsoft. XMLHTTP"); //IE 5. x,6 
catch(e){} 
} 
} 


2. 指定 响应 处 理 函数 


响应 处 理 函数 (回调 函数 ) 即 当 服 务 器 返回 HTTP 请 求 响应 信息 时 客户 端的 处 理 方式 。 
为 Ajax 指定 响应 处 理 函 数 有 点 类 似 桌 面 应 用 程序 的 监听 事件 和 事件 处 理 函 数 ,只 不 过 在 
Ajax 应 用 程序 中 触发 事件 并 调用 事件 处 理 函数 与 响应 处 理 函 数 被 回调 执行 是 在 不 同 的 时 
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间 段 发 生 的 ,不 在 一 个 线程 中 。XMLHttpRequest 对 象 能 够 监听 HTTP 请 求 的 状态 , 当 状 
态 变 化 时 ,调用 回调 函数 执行 响应 处 理 函 数 。 

每 当 readyState 改变 时 就 会 触发 onreadystatechange 事件 , readyState 属性 存 有 
XMLHttpRequest 的 状态 信息 。 下 面 是 XMLHttpRequest 对 象 的 3 个 重要 的 属性 ,如 
表 14-1 所 示 。 


表 14-1 readyState 状态 


属 性 描 述 
onreadystatechange 存储 函数 (或 函数 名 ) ,每 当 readyState 属性 改变 时 就 会 调用 该 函数 
存 有 XMLHttpRequest 的 状态 ,从 0 到 4 发 生变 化 
0: 请 求 未 初始 化 
1: 服务 器 连接 已 建立 
2: 请 求 已 接收 
3: 请 求 处 理 中 
4: 请 求 已 完成 , 且 响 应 已 就 绪 
200:“OK” 
404: 未 找到 页 面 


readyState 


status 


在 JavaScript 中 ,只 要 将 相应 的 JavaScript 处 理 函 数 名 称 给 XMLHttpRequest 对 象 的 
onreadystatechange 属性 就 可 以 了 ,代码 如 下 : 


xmlHttp. onreadystatechangeo = onCallback; 


其 中 ,onCallback 是 一 个 JavaScript 函数 。 
3. 发 出 HTTP 请 求 


在 指定 响应 处 理 函 数 后 ,就 可 以 向 服务 器 发 出 HTTP 请 求 了 ,这 一 步 需 要 调用 
XMLHttpRequest 对 象 的 open 和 send 方法 : 

xmlHttp. open( "GET", url, true); 

xmlHttp. send(null); 

open 方法 首先 创建 一 个 针对 目标 URL、 采 用 相应 HTTP 请 求 方式 的 HTTP 请 求 。 

open 方法 的 第 一 个 参数 是 HTTP 请 求 的 方式 ,为 GET、POST 或 者 是 HEAD。 

open 方法 的 第 二 个 参数 是 目标 URL, 这 个 URL 可 以 是 任何 的 URL, 包 括 需 要 服务 器 
解释 执行 的 页 面 或 者 是 静态 页 面 。 

open 方法 的 第 三 个 参数 指定 HTTP 请 求 是 否 异 步 执行 , 即 在 等 待 服务 器 返回 信息 的 
时 间 内 是 继续 执行 下 面 的 代码 ,还 是 等 待 服务 器 返回 响应 数据 再 执行 下 面 的 代码 。 如 果 为 
true, 则 HTTP 请 求 采用 异步 方式 . 即 在 服务 器 接收 并 响应 HTTP 请 求 期 间 , 其 下 方 代码 继 
续 执 行 , 当 服务 器 返回 响应 数据 时 ,回调 函数 将 被 调用 执行 ; 如 果 为 false, 则 下 面 的 代码 不 
会 执行 ,直到 服务 器 返回 信息 。 默 认为 true。 

open 方法 在 调用 完毕 要 调用 send 方法 ,将 HTTP 请 求 发 送 给 服务 器 。 在 调用 open 方 
法 之 后 、send 方法 之 前 ,必须 调用 XMLHttpRequest 对 象 的 setRequestHeader 方法 ,修改 
HTTP 请 求 头 部 中 的 MIME 类 别 。 代 码 如 下 : 
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xmlHttp. setRequestHeader( 'Content ~ type\', 'application/x— www — form— urlencoded'); 


一 般 会 把 以 上 代码 封装 到 一 个 函数 中 ,以 方便 使 用 。 代 码 如 下 : 


// 向 服务 器 发 出 异步 请 求 

function sendRequest (ur1){ 
if(xmlHttp){ 
xmlHttp. open( "GET", url, true); 
xmlHttp. onreadystatechange = onCallback; // 设 定 状态 改变 时 触发 的 回调 函数 
xmlHttp. setRequestHeader( 'Content ~ type\', 'application/x — www- form — urlencoded'); 
xmlHttp. send(nul11); 
: 

} 


4. 处 理 服务 器 返回 的 信息 


在 发 出 HTTP 请 求 后 ,XMLHttpRequest 对 象 等 待 服务 器 端的 响应 。 当 服务 器 返回 信 
息 时 ,回调 函数 会 被 调用 。 在 回调 函数 中 ,首先 要 检查 XMLHttpRequest 对 象 的 readyState 
值 ,判断 请 求 的 当前 状态 。 当 readyState 的 值 为 4 时 ,代表 HTTP 请 求 发 送 成 功 并 且 服 务 
器 已 经 传 回 所 有 数据 ,可 以 开始 处 理 信息 并 更 新 页 面 了 。 判 断代 码 如 下 : 

if(xmlHttp. readyState == 4){ 

// 请 求 成 功 返 回 

Jelse{ 

// 信 息 没有 返回 

} 

在 服务 器 返回 信息 后 ,还 需要 判断 返回 的 HTTP 请 求 的 状态 码 , 确 定 返 回 的 数据 没有 
错误 ,状态 码 可 以 参见 表 14-1。 其 中 ,200 代表 数据 返回 成 功 。 其 判断 过 程 如 下 : 

if(xmlHttp. status == 200){ 

// 页 面 正 常 ,可 以 开始 处 理 信息 

Jelse{ 

// 页 面 有 问题 

} 

XMLHttpRequest 对 成 功 返 回 的 信息 有 两 种 处 理 方式 , 即 responseText 和 
responseXML 。 其 中 ,responseText 将 返回 的 信息 当成 字符 串 使 用 ,responseXML 将 返回 
的 信息 当成 XML 文档 使 用 。 使 用 responseXML 处 理 响 应 数据 必须 保证 服务 器 返回 的 响 
应 数据 是 XML 文档 格式 。 


f4.4 JSON 


在 Ajax 应 用 程序 中 发 送 和 接收 信息 时 可 以 选择 以 纯 文本 和 XML 作为 数据 格式 。 对 
于 纯 文本 方式 ,经 常 采 用 JSON。JSON 是 JavaScript 对 象 表示 法 (JavaScript Object 
Notation) 的 简称 ,JSON 是 一 种 数据 描述 格式 ,用 于 对 数据 进行 编码 。 下 面 的 代码 就 是 
JSON 数据 形式 的 一 个 例子 : 
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{"people":[ 


{"firstName" :"Brett", "lastName" :"McLanghlin", "email":"brett@newInsstance. com"}, 
{"firstName" :"Jaso", "lastName" :"Hunter", "email":"jason@ servlets. com"}, 
{"firstName" :"Elliotte", "lastName" :"Harold", "email" :"elharo@macfaq. com"} 


]} 


JSON 使 用 
JSON 解析 器 和 
JavaScript 对 象 


JavaScript 语法 来 描述 数据 对 象 ,但 是 JSON 仍然 独立 于 语言 和 平台 。 
JSON 库 支持 许多 不 同 的 编程 语言 。JSON 文本 格式 在 语法 上 与 创建 
的 代码 相同 。 由 于 这 种 相似 性 ,无 须 解析 器 ,JavaScript 程序 能 够 使 用 内 建 


的 eval() 函数 ,用 JSON 数据 生成 原生 的 JavaScript 对 象 。 

用 户 可 以 将 JSON 和 XML 进行 比较 ,以 更 深入 地 认识 JSON。 类 似 于 XML,JSON 是 
纯 文本 ,具有 “自我 描述 性 "(人 类 可 读 ), 具 有 层级 结构 ( 值 中 存在 值 ), 可 通过 JavaScript 进 
行 解析 ,数据 可 使 用 Ajax 进行 传输 。 


与 XML 相 


比 ,不 同 之 处 是 JSON 没有 结束 标签 ,书写 字符 串 更 短 、 读 / 写 速度 更 快 ,能 


够 使 用 内 建 的 JavaScript eval() 方 法 进行 解析 ,使 用 数组 ,不 使 用 保留 字 。 
在 Ajax 应 用 中 ,JSON 比 XML 更 快 、 更 易 使 用 。 


14.4.1 


JSON 语法 


JSON 语法 是 JavaScript 对 象 表示 语法 的 子 集 , 它 的 主要 要 求 如 下 : 


(1) 数据 在 
(2) 数据 由 
(3) 花 括号 


名 称 / 值 对 中 ; 
逗号 分 隔 ; 
保存 对 象 ; 


(4) 方 括号 保存 数组 。 
JSON 数据 的 书写 格式 是 名 称 / 值 对 。 名 称 / 值 对 包括 字段 名 称 (在 双 引 号 中 ) ,后面 写 
一 个 冒号 ,然后 是 值 ,例如 : 


"firstName" : 


"John" 


这 很 容易 理解 ,等 价 于 下 面 这 条 JavaScript 语句 : 


firstName = "， 


John" 


JSON 值 可 以 是 : 
(1) 数字 (整数 或 浮 点 数 ); 


(2) 字符 串 
(3) 逻辑 值 


(在 双 引 号 中 ); 
(true 或 false); 


(4) 数组 (在 方 括号 中 ); 
(5) 对 象 (在 花 括号 中 ); 


(6) null。 


14.4.2 


JSON 对 象 


按照 最 简单 的 形式 ,可 以 用 下 面 的 JSON 表示 名 称 / 值 对 : 
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{"firstName" :"Brett"} 
这 个 示例 非常 基本 ,而 且 实 际 上 比 等 效 的 纯 文本 名 称 / 值 占用 更 多 的 空间 : 
firstName = "Brett" 


但 是 , 当 将 多 个 名 称 / 值 对 串 在 一 起 时 ,JSON 就 体现 出 它 的 价值 了 。 首 先 可 以 创建 包 
含 多 个 名 称 / 值 对 的 记录 ,例如 : 


{"firstName" :"Brett","lastName" :"McLanghlin", "email":"brett@newInsstance. com"} 


从 语法 方面 来 看 ,这 与 名 称 / 值 对 相 比 并 没有 很 大 的 优势 ,但 是 在 这 种 情况 下 JSON 更 
容易 使 用 ,而 且 可 读 性 更 好 。 例 如 , 它 明 确 地 表示 以 上 3 个 值 都 是 同一 记录 的 一 部 分 , 花 括 
号 使 这 些 值 有 了 某 种 联系 。 

当 需 要 表示 一 组 值 时 ,JSON 不 仅 能 够 提高 可 读 性 ,而 且 可 以 减少 复杂 性 。 例 如 ,假设 
希望 表示 一 个 人 名 列表 ,在 XML 中 需要 许多 开始 标记 和 结束 标记 ; 如 果 使 用 典型 的 名 称 / 
值 对 (就 像 在 本 书 前 面 看 到 的 那 种 名 称 / 值 对 ) ,那么 必须 建立 一 种 专 有 的 数据 格式 ,或 者 将 
键 名 称 修改 为 personl-firstrName 的 形式 ; 如 果 使 用 JSON, 则 只 需 将 多 个 带 花 括号 的 记录 
分 组 在 一 起 。 


14.4.3 在 JavaScript 中 使 用 JSON 


读者 掌握 了 JSON 的 格式 之 后 ,在 JavaScript 中 使 用 它 就 很 简单 了 。JSON 是 
JavaScript 原生 格式 ,这 意味 着 在 JavaScript 中 处理 JSON 数据 不 需要 任何 特殊 的 API 或 
工具 包 。 


1. 将 JSON 数据 赋 给 变量 


例如 可 以 创建 一 个 新 的 JavaScript 变量 ,然后 将 JSON 格式 的 数据 字符 串 直接 赋 给 它 ， 
代码 如 下 : 


Var people = 
{ "programmers:[ 
{"firstName" :"Brett", "lastName" :"McLaughlin","email" :"brett@newlnstance. com"}, 
{"firstName" :"Jason", "lastName" :"fIunter", "email":"jason@ servlets. com"}, 
{"firstName" :"Elliotte", "lastName" :"Harold", "email" :elharo@macfaq. com} 
], 
"authors":[ 
{"firstName":"Isaac", "lastName":"Asimov", "genre" :"science fiction"}, 
{"firstName":"Tad", "lastName" :"Hilliams", "genre" :"fantasy"}, 
{"firstName" :"Frank", "lastName" :"peretti", "genre" :"christian fiction"} 
J], 
"musicians":[ 
{"firstName":"Eric", "lastName" :"Clapton"," instrument":"guitar"}, 
{"firstName" :"Sergei", "lastName" :"Rachmaninoff","instrument" :"piano"} 
] 
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这 非常 简单 : 现在 people 包含 前 面 看 到 的 JSON 格式 的 数据 ,但 是 这 还 不 够 ,因为 访问 
数据 的 方式 似乎 还 不 明显 。 


2. 访问 数据 
尽管 看 起 来 不 明显 ,但 是 上 面 的 长 字符 串 实际 上 只 是 一 个 数组 ,将 这 个 数组 放 进 
JavaScript 变量 之 后 就 可 以 很 轻松 地 访问 它 。 实 际 上 ,只 需 用 点 号 表示 法 来 表示 数组 元 素 。 


所 以 ,要 想 访问 programmers 列表 中 第 一 个 条 目的 姓氏 ,只 需 在 JavaScript 中 使 用 下 面 的 
代码 : 


people. programmers[0]. lastName; 


注意 : 数组 索引 是 从 0 开始 的 ,所 以 这 行 代码 首先 访问 people 变量 中 的 数据 ,然后 移动 
到 被 称 为 programmers 的 条 目 , 再 移动 到 第 一 个 记录 ([0]), 最 后 访问 lastName 键 的 值 , 结 
果 是 字符 串 值 “McLaughlin”。 


3. 修改 JSON 数据 

正如 可 以 用 点 号 和 括号 访问 数据 一 样 ,用 户 也 可 以 按照 同样 的 方式 轻松 地 修改 数据 : 
people. musicans[1]. lastName = "Rachmaninov"; 

在 将 字符 串 转换 为 JavaScript 对 象 之 后 ,就 可 以 像 这 样 修改 变量 中 的 数据 。 

4. 转换 回 字 符 串 


当然 ,如 果 不 能 轻松 地 将 对 象 转换 回 本 文 提 到 的 文本 格式 ,那么 所 有 数据 修改 都 没有 太 
大 的 意义 。 在 JavaScript 中 这 种 转换 也 很 简单 ; 

String newJSONtext = people. toJSONString( ); 
这 样 就 行 了 。 现 在 获得 了 一 个 可 以 在 任何 地 方 使 用 的 文本 字符 串 。 例 如 ,可 以 将 它 用 作 
Ajax 应 用 程序 中 的 请 求 字符 串 。 

更 重要 的 是 ,可 以 将 任何 JavaScript 对 象 转换 为 JSON 文本 ,并 非 只 能 处 理 原来 用 
JSON 字符 串 赋值 的 变量 。 为 了 对 名 为 myObject 的 对 象 进 行 转换 ,只 需 执行 相同 形式 的 


命令 ， 


myObjectlnJSON == myObject. toJSONString( ) ; 


这 就 是 JSON 与 本 书 讨论 的 其 他 数据 格式 之 间 的 最 大 差异 。 如 果 使 用 JSON, 只 需 调 用 一 
个 简单 的 函数 就 可 以 获得 经 过 格式 化 的 数据 ,就 可 以 直接 使 用 了 。 对 于 其 他 数据 格式 ,需要 
在 原始 数据 和 格式 化 数据 之 间 进 行 转换 。 即 使 使 用 Document Object Model 这 样 的 API 
(提供 了 将 自己 的 数据 结构 转换 为 文本 的 函数 ) ,也 需要 学 习 这 个 API, 并 使 用 API 的 对 象 ， 
而 不 是 使 用 原生 的 JavaScript 对 象 和 语法 。 

最 终结 论 是 ,如 果 要 处 理 大 量 的 JavaScript 对 象 ,那么 JSON 几乎 可 以 肯定 是 一 个 好 的 
选择 ,这样 可 以 轻松 地 将 数据 转换 为 可 以 在 请 求 中 发 送 给 服务 器 端 程序 的 格式 。 
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(4,5 综合 应 用 


利用 Ajax 的 异步 传输 制作 网 页 文字 的 显示 。 
(1) aj.js 文 件 的 代码 如 下 : 


"== 


var xmlHttp; 
function createAjax(){ 
// 创 建 xmlHttp 对 象 
xmlHttp = window. ActiveXObject?new ActiveXObject( 'Microsoft. XMLHTTP') :new XMLHttpRequest( ); 
// 如 果 浏 览 器 不 支持 
if(!xmlHttp){ 
alert(' 此 浏览 器 不 支持 xmlHttpRequest 对 象 ') ; 


function changeImg(url, par){ 
//alert( 'dddd'); 
createAjax(); 
// 打 开 连 接 
xmlHttp. open( 'get', url, true); 
// 准 备 就 绪 
xmlHttp. onReadyStateChange = function(){ 
if(xmlHttp. readyState == 4){ 
if(xmlHttp. status == 200){ 
//xmlHttp. responseText 存放 返回 文本 
var getText = xmlHttp.responseText; 
// 清 除 缓存 
xmlHttp = null; 
var img = "<img src=" + getText + ">"; 
//document. getElementById(par).src = getText; 如 果 浏 览 器 不 支持 用 下 面 的 形式 
document. getElementById( par). innerHTML = img; 
// 在 login.php 文件 < span id="img">< img src = "../data/imgCode. php" height = 
"18px"></span> 
} 
} 
} 
// 发 送 请 求 
xmlHttp. send(nul1); 
} 
function doAjax(url, parl, par2){ 
//alert( 'ddd'); 
createAjax(); 
//1) 读 取 表单 元 素 中 的 值 < input type= 'text' id= '> 
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var getTestValue = document. getElementById(parl). value; 


//2) 读 取 div 标签 中 的 值 
//var getTestValue = document. getElementById(parl). innerHTML; 
//alert(getTestValue); 


// 打 开 请 求 
xmlHttp. open( 'get', url + '?id= '+ getTestValue, true); 
// 准 备 执行 ,xzmlHttp 需要 的 是 一 个 函数 ,而 不 是 返回 值 
xmlHttp. onReadyStateChange = function(){ 
if(xmlHttp. readyState == 1){ 
document. getElementById(par2). innerHTML = ' 数 据 加 载 中 ------- 3 
} 
if(xmlHttp. readyStat 4){ 
if(xmlHttp. status == 200){ 
var getText = xmlHttp.responseText; 
// 清 除 缓存 
xmlHttp = null; 


//1) 适用 于 表单 元 素 < input type = 'text' id='> 
document. getElementById( par2). value = getText; 


//2) 适用 于 < div id= '"></div> 
//document. getElementById(par2). innerHTML = getText; 


} 
// 发 送 请 求 
xmlHttp. send(nul1); 


=-> 


(2) 网 页 文件 testajax. html 的 代码 如 下 : 


<html> 
<head> 


< Script language = 'javascript' src = 'aj. js></script> 


</head> 
<body> 
<! --ajax 异步 传输 文本 实例 一 > 


< form> 


输入 文本 : < input type = 'text' name = 'test2' id = 'tl' onKeyUp = " javascript: doAjax 
('testajax. php', 't1', 't2');"> 
<br /> 
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显示 文本 : < input type = 'text'name= 'testl' id= 't2> 
</form> 


</body> 


</html > 


(3) 本 例 中 的 Ajax 用 PHP 服务 器 配置 , 故 存在 一 个 PHP 文件 ,testajax. php 的 代码 
如 下 : 


<?php 
$ txt = $_GET['id']; 
echo $ txt; 


Pn 


本 章 学 习 目 标 : 

了解 jQuery 的 功能 及 应 用 。 
局 掌握 jQuery 的 选择 器 和 函数 。 
避 掌 握 jQuery UI 的 使 用 。 


(15,1 jQuery 概述 


jQuery 由 美国 人 John Resig 创建 ,至 今 已 吸引 了 来 自 世 界 各 地 的 众多 JavaScript 高 手 
加 入 其 team, 包 括 来 自 德国 的 J&ouml;rn Zaefferer, 罗 马 尼 亚 的 Stefan Petre 等 。 jQuery 
是 继 Prototype 之 后 又 一 个 优秀 的 JavaScript 框架 。 其 宗旨 是 “Write Less,Do More”, 即 
“ 写 更 少 的 代码 ,做 更 多 的 事情 ”。 


15.1.1 jQuery 的 起 源 


jQuery 是 一 个 轻 量 级 的 JavaScript 库 ,JavaScript 语言 是 在 Web 页 面 上 使 用 的 客户 端 
脚本 语言 ,使 用 jQuery 可 以 帮助 用 户 迅速 地 完成 各 种 脚本 功能 ,并 且 实 现 的 效果 都 是 跨 浏 
览 器 兼容 的 。jQuery 的 主要 设计 目标 是 ”Write Less,Do More”, 即 “ 写 更 少 的 代码 ,做 更 多 
的 事情 ”, 从 而 改变 编写 JavaScript 脚本 代码 的 方式 。 

jQuery 是 由 John Resig 于 2006 年 1 月 推出 的 开源 JavaScript 项 目 , 已 经 从 当年 的 1.0 
版 本 发 展 到 2009 年 的 1.3.X 版本, 下面 简单 回顾 一 下 jQuery 的 发 展 历史 。 

jQuery 1.0 于 2006 年 8 月 发 布 .作为 第 一 个 发 布 版 本 已 经 包含 了 CSS 选择 器 .事件 处 
理 和 Ajax 接口 函数 。 

jQuery 1.1 于 2007 年 1 月 发 布 ,对 API 做 了 大 量 的 整理 ,将 不 常用 的 函数 进行 合并 或 
删 减 。 

jQuery 1.1.3 于 2007 年 7 月 发 布 .大 幅度 改善 了 选择 器 的 性 能 ,性 能 已 经 可 以 和 
Prototype、MooTools、Dojo 等 相 媲 美 。 

jQuery 1.2 于 2007 年 12 月 发 布 ,取消 了 XPath 选择 器 ,因为 CSS 选择 器 已 经 足够 强 
大 ,对 函数 的 易 用 性 和 插件 的 开发 都 有 所 改进 。 

jQuery UI 于 2007 年 12 月 发 布 ,jQuery UI 的 发 布 为 实现 丰富 的 用 户 界 面 和 用 户 体验 
提供 了 强 有 力 的 基础 。 
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jQuery 1. 2. 6 于 2008 年 5 月 发 布 , 主要 的 更 新 在 于 性 能 提升 ,并 且 整 合 了 
DimensionsPlugin 插件 。 

jQuery 1.3 于 2009 年 1 月 发 布 . 它 更 新 了 Sizzle 选择 器 引擎 ,提高 了 很 多 函数 方法 的 
性 能 ,一 举 让 jQuery 成 为 最 快 的 脚本 类 库 , 此 外 还 添加 了 live 等 事件 委托 函数 。 

jQuery 1.4 在 2010 年 1 月 14 日 ,jQuery 四 岁 生日 时 发 布 ,该 版 本 显著 提高 了 最 常用 的 
jQuery 方法 的 性 能 ,并 且 修 复 了 非常 多 的 bug,jQuery 开发 团队 在 开发 jQuery 1.4 时 大 幅 
度 增加 了 测试 用 例 。jQuery 在 所 有 主流 浏览 器 中 全 部 通过 ,1.4 版 本 还 完全 更 换 了 jQuery 
的 在 线 文档 手册 。 同 时 启用 了 新 的 api. jQuery. com 作为 手册 的 地 址 ,此 手册 对 函数 的 组 织 
和 分 类 更 加 系统 化 。 

通过 自身 不 断 地 完善 和 更 新 ,jQuery 的 应 用 已 经 越 来 越 广泛 ,到 目前 为 止 它 是 使 用 最 
广泛 的 JavaScript 类 库 之 一 ,被 微软 和 诺基亚 等 各 大 公司 采用 ,只 要 是 需要 使 用 JavaScript 
的 地 方 ,jQuery 就 能 发 挥 重要 作用 。 


15.1.2 jQuery 的 功能 
1. 获取 网 页 元 素 


HTML DOM(Document Object Model, 文 档 对 象 模型 ) 定 义 了 访问 和 处 理 HTML 文 
档 的 标准 方法 , 它 将 HTML 文档 呈现 为 带 有 元 素 、. 属 性 和 文本 的 树 结构 (节点 树 ) 。 虽 然 可 
以 通过 JavaScript 重 构 整 个 HTML 文档 ,可 以 添加 、 移 除 ,改变 或 重 排 网 页 中 的 元 素 , 但 是 
如 果 不 使 用 JavaScript 库 ,而 直接 使 用 原生 的 JavaScript 脚本 来 访问 HTML 文档 中 的 某 个 
元 素 , 则 必须 编写 元 长 的 代码 ,jQuery 提供 了 一 套 高 效 、 可 靠 的 选择 器 ,将 这 些 选择 器 与 工 
厂 函 数 $() 结 合 使 用 ,就 可 以 方便 ,快捷 地 从 文档 中 选择 所 需 的 元 素 。 


2. 设置 网 页 外 观 


HTML 标记 用 于 定义 文档 内 容 , 同 时 由 浏览 器 完成 文档 布局 。 虽 然 可 以 使 用 CSS 定 
义 如 何 显示 HTML 元 素 , 并 实现 内 容 与 表现 形式 的 分 离 ,不 过 一 旦 遇 到 了 不 同 浏览 器 不 完 
全 支持 相同 标准 的 情况 ,仅仅 使 用 CSS 往往 无 法 达到 预期 目的 。jQuery 提供 了 跨 浏览 器 的 
解决 方案 , 当 访问 者 使 用 当前 流行 的 大 多 数 浏览 器 时 ,用 jQuery 设置 的 网 页 都 会 保持 相同 
的 外 观 。 


3. 更 改 网 页 内 容 


使 用 jQuery 提供 的 API 方 法 只 需要 编写 少量 代码 就 可 以 很 轻松 地 修改 HTML 文档 
的 内 容 , 例 如 动态 改变 段落 .div 元 素 或 表格 单元 格 包含 的 文本 、 搬 和 或 翻转 网 页 上 的 图 
片 等 。 

4. 响应 用 户 操作 


jQuery 提供 了 可 靠 的 事件 处 理 机 制 , 可 以 在 各 种 浏览 器 中 捕获 各 种 各 样 的 网 页 事件 ， 
并 通过 代码 对 用 户 的 操作 做 出 适当 响应 ,从 而 为 网 页 添加 动态 性 和 交互 性 。 
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5. 添加 动画 效果 


jQuery 不 仅 内 置 了 一 些 淡 入 、 擦 除 之 类 的 效果 ,还 提供 了 制作 新 效果 的 工具 包 , 开 发 者 
可 以 使 用 这 些 功 能 为 网 页 添加 动画 效果 ,在 实现 交互 行为 的 同时 提供 视觉 上 的 美观 ,使 站 点 
让 访问 者 感到 耳目 一 新 。 


6. 实现 Ajax 交互 


Ajax 的 全 称 是 Asynchronous JavaScript and XML ,意思 是 异步 的 JavaScript 和 XML， 
Ajax 是 Web 2.0 的 核心 技术 。jQuery 对 Ajax 提供 了 很 好 的 支持 ,借助 于 jQuery, 它 允许 
以 异步 通信 方式 向 服务 器 发 出 HTTP 请 求 并 从 服务 器 获取 响应 信息 ,客户 端 可 以 在 任何 时 
候 与 服务 器 进行 通信 ,而 无 须 刷 新 整个 页 面 。 


15.1.3 jQuery 的 应 用 


下 面 结 合 一 个 典型 的 例子 来 说 明 jQuery 在 Ajax 开发 中 的 应 用 。 在 这 个 例子 中 将 模拟 
注册 网 站 用 户 时 的 新 用 户 名 检测 过 程 ,分 别 通过 原生 的 JavaScript 和 jQuery 来 实现 Ajax 
请 求 ,读者 可 以 从 两 者 的 比较 中 对 jQuery 获得 一 个 初步 体验 。 


1. 配置 开发 环境 


jQuery 只 是 一 个 用 于 网 页 客户 端 脚本 编程 的 JavaScript 库 ,不 必 进 行 安装 和 调试 工作 。 
但 是 ,为 了 使 用 jQuery 实现 Ajax 交互 ,需要 架设 服务 器 端 环 境 。 另外 ,为 了 便于 编写 和 调 
试 脚本 代码 ,还 需要 选择 一 种 适当 的 开发 工具 。 在 本 书 中 选择 Tomcat 作为 应 用 程序 服务 
器 ,并 选择 EditPlus 作为 开发 工具 。 


2. 创建 HTML 页 面 


用 EditPlus 创建 一 个 网 页 ,在 该 页 中 插入 一 个 表单 并 在 其 中 添加 标签 ,文本 框 、 密 码 杠 
和 提交 按钮 。 源 代码 如 下 : 


<! DOCTYPE HTML PUBLIC" - //W3C XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/ 
xhtmll - transitional. dtd"> 
< htm]l xmlns = "http://www. w3.org/1999/xhtml"> 
< head > 
<title> user register </title> 
<meta http— equiv = "Content - Type" content = "text/html;charset = utf — 8"/> 
<style> 

body{ font - sixe:12px} 

input{width:120px} 
</style> 
</head> 
<body> 

< form method = "post" action="" id= "frm register" name = "frm register"> 

< table border = "1" width = "180px"> 
<tr> 
<td>< lable for = "username"> username:</label ></td> 


第 15 章 ”jQuery 


<td> 
< input type = "text" id = "username" name = "username" /> 
< span id= "message a"></span> 
</td> 
</tr> 
<tr> 
<td>< lable for = "password"> password:</label ></td> 
<td> 
< input type = " password " id=" password " name = " password "/> 
< span id= "message_b"></span> 
</td> 
</tr> 
<tr> 
<td colspan= "2" align= "right"> 
< input type = "submit" id = "cmd_regisster" value = "register"/> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html > 


此 网 页 是 一 个 基于 XHTML 1.0 Transitional 标准 的 HTML 文档 ,其 中 文档 类 型 声明 
(DOCTYPE) 和 主要 HTML 标记 是 由 EditPlus 自动 生成 的 ,设计 时 在 页 面 中 添加 了 以 下 
内 容 : 

在 网 页 首部 使 用 style 标记 定义 了 一 个 CSS 样式 表 , 其 中 包含 两 条 规则 ,一 个 用 于 设置 
body 各 元 素 的 字号 , 另 一 个 用 于 设置 输入 (input) 元 素 的 宽度 。 

在 正文 部 分 添加 了 一 个 表单 并 命名 为 frm_register, 即 以 frm_register 作为 id 和 name 
属性 值 ,在 客户 端 脚本 中 可 借 此 访问 表单 ,还 将 该 表单 的 method 属性 设置 为 post, 指 定 使 
用 post 方法 在 正文 中 嵌入 表单 数据 。 

在 表单 frm_register 中 插入 一 个 3 行 2 列 的 表格 ,用 于 安排 以 下 网 页 元 素 的 布局 : 

1) 两 个 label 元 素 

这 些 label 可 以 为 input 元 素 设置 标注 ,而 不 会 向 用 户 呈 现任 何 特殊 效果 ,不 过 这 里 将 
label 的 for 属性 分 别 设置 为 input 元 素 的 id, 可 改进 鼠标 用 户 的 操作 条 件 , 当 在 label 内 单 
击 文本 时 ,浏览 器 就 会 自动 将 焦点 转 到 和 标签 相关 的 表单 域 上 。 

2) 3 个 input 元 素 

将 这 些 元 素 的 type 属性 分 别 设 为 text、password 和 submit, 使 它们 分 别 充当 单行 文本 
框 、 密 码 框 和 提交 按钮 。 在 客户 端 脚 本 中 ,可 通过 id 和 name 访问 表单 域 ,在 服务 器 Java 
Servlet 脚本 中 , 则 可 通过 HttpRequest 对 象 相应 表单 域 的 name 来 获取 用 户 通 过 表单 提交 
的 值 。 

3) 两 个 span 元 素 

这 些 元 素 标记 分 别 位 于 表单 域 旁 边 , 用 于 在 文档 中 创建 一 个 嵌入 文本 容器 。 它 们 的 id 
分 别 为 message_a 和 message_b, 虽 然 在 加 载 网 页 时 不 可 见 , 但 可 以 通过 客户 端 脚本 设置 其 
innerHTML 属性 ,以 指定 其 开始 标记 和 结束 标记 之 间 的 HTML 内 容 , 也 可 以 通过 style 属 
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性 设置 其 外 观 。 
3. 编写 jQuery 代码 


当 在 注册 页 上 输入 用 户 名 和 密码 并 单 击 【 提 交 】 按 钮 时 就 会 将 表单 数据 发 送 到 服务 器 端 
进行 处 理 。 如 果 检 测 到 所 提交 的 用 户 已 被 注册 , 则 应 向 用 户 显示 相应 的 提示 信息 ,并 让 其 选 
择 新 的 用 户 名 进行 尝试 ,这 是 传统 的 用 户 注册 处 理 方法 。 

更 好 的 解决 方案 是 当 在 文本 框 中 输入 用 户 名 并 离开 此 文本 框 时 即 此 用 户 名 是 否 可 用 的 
信息 ,而 不 必 等 到 提交 表单 之 后 。 这 种 解决 方案 需要 借助 于 Ajax 技术 才能 实现 , 即 通过 客 
户 端 JavaScript 脚本 以 异步 方式 向 服务 器 传递 数据 并 获取 相应 的 响应 。 

下 面 说 明 如 何 使 用 jQuery 实现 Ajax 交互 。 打 开 user_reglster. htm, 在 网 页 首部 导入 
jQuery ,代码 如 下 : 


< script type = "text/JavaScript" src = "jQuery— 1.8.3.min. js"></script> 
然后 使 用 jQuery 编写 JavaScript 客户 端 脚本 。 源 代码 如 下 : 


< script type = "text/JavaScript"> 


$ (document) . ready(function){ // 在 DOM 加 载 就 绪 时 绑 定 一 个 匿名 函数 
$ ("#username"). blur(function){ // 设 置 username 的 文本 框 的 blur 事件 处 理 程序 
if( $ (this).val() ="){ // 若 用 户 名 为 空 


$ ("#message_a").html(" 用 户 名 不 能 为 空 !").css("color", "red"); // 设 置 span 的 内 容 和 颜色 
$ (this). focus(); 
return; 


} 

// 以 异步 方式 向 服务 器 发 送 数据 并 将 HTTP 响应 文本 插入 到 span 元 素 中 

$ ("message a").1load("userLogin. do". {username: $ (this).val()}).css("color", "gray");}); 
$ (document. frm register). submit(function(){ // 设 置 表单 forml 的 submit 事件 处 理 程 序 
var status = true; 

if( $ ("#password").val()==""{ // 若 未 输入 密码 

$ ("#message_b").html(" 密 码 不 能 为 空 !"). css("color","red"); /设置 span 的 内 容 和 颜色 
$ ("#password"). focuse(); // 将 焦点 转移 到 password 密码 框 

stause = false; 

Jelse{ 

$ ("#message b"). html(""); 

} 

if( $ ("#username").val()==""){ // 若 未 输入 用 户 名 

$ ("#message_a").html(" 用 户 名 不 能 为 空 !").css("color", "red"); // 设 置 span 的 内 容 和 颜色 
$ ("#password"). focuse(); // 将 焦点 转移 到 username 密码 框 

stause = false; 

}else{ 

$ ("#message a").html(""); 

i 

this.action = "JavaScript;alert(' 用 户 名 '+ $ ('#username).val());" 

return status; // 若 返回 true, 则 允许 提交 表单 ,否则 取消 提交 表单 
D); 

DD); 


</script > 


用 jQuery 编写 的 事件 处 理 程序 已 经 与 相应 的 网 页 元 素 绑 定 ,无须 再 对 网 页 元 素 进行 任 
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何 修改 。user_reglster. htm 网 页 由 于 引入 了 jQuery, 书 写 的 代码 比 只 使 用 JavaScript 脚本 
少 几 十 行 ,jQuery 的 简洁 、 高 效 由 此 可 见 。 

下 面 对 这 个 例子 中 用 到 的 jQuery 功能 做 简要 的 说 明 。 

1) 创建 jQuery 对 象 

jQuery 对 象 是 指使 用 jQuery 工厂 函数 包装 DOM 元 素 所 产生 的 对 象 jQuery。 工 厂 函 
数 是 jQuery 的 核心 函数 ,其 名 称 为 jQuery, 简 写 形式 为 $ 。 

使 用 函数 $$ 可 将 DOM 元 素 转化 为 jQuery 对 象 。 在 本 例 中 使 用 $ (document) 将 DOM 
元 素 document 转化 为 jQuery 对 象 ,并 调用 ready 方法 指定 DOM 加 载 就 绪 时 执行 的 一 个 
匿名 函数 : 

$ (document). ready(function)(){ 

hea 

}; 

在 本 例 中 还 使 用 $ (document. frm_register) 将 表单 frm_register 转换 成 一 个 jQuery 
对 象 , 并 通过 对 其 调用 submit 方法 来 设置 提交 表单 时 执行 的 事件 处 理 程序 。 

工厂 函数 $ 还 可 以 接收 一 个 包含 $$("#username") 从 方法 中 获取 id 为 username 的 
input 元 素 并 返回 一 个 jQuery 对 象 , 通 过 对 其 调用 blur 的 方法 来 设置 文本 框 的 blur 事件 处 
理 程 序 。 

$("# username") 与 document. getElementById("username") 具 有 类 似 的 功能 ,它们 
都 可 以 从 文档 中 选择 出 id 为 username 的 input 元 素 , 但 前 者 是 一 个 jQuery 对 象 ,后 者 是 一 
个 DOM 对 象 。 

在 编写 jQuery 代码 时 ,正确 区 分 jQuery 对 象 和 DOM 对象 是 十 分 重要 的 。 

对 于 jQuery 对 象 可 以 使 用 jQuery 特有 的 各 种 方法 进行 操作 ,但 不 能 对 其 使 用 DOM 
属性 和 方法 。 同 样 ,对 于 DOM 对 象 可 以 对 其 使 用 DOM 属性 和 方法 ,但 不 能 使 用 jQuery 
方法 。 

2) 链 式 操作 

在 使 用 jQuery 工厂 函数 创建 jQuery 对 象 之 后 , 即 可 使 用 jQuery 提供 的 各 种 方法 对 其 
进行 操作 。 大 多 数 jQuery 方法 都 具有 一 个 特点 , 即 在 对 jQuery 对 象 执行 所 需 操作 后 仍然 
返回 此 对 象 本 身 , 从 而 允许 调用 另 一 个 jQuery 方法 对 它 进行 操作 。 在 这 种 操作 链条 中 可 以 
包含 任意 数目 的 方法 调用 ,因此 使 用 一 个 语句 就 能 够 完成 对 同一 个 对 象 的 多 种 操作 。 

在 本 例 中 使 用 以 下 语句 对 id 为 message_a 的 span 元 素 进 行 操 作 , 先 设置 其 开始 标记 
与 结束 标记 之 间 的 内 容 , 然 后 对 文本 颜色 进行 设置 。 

$ ("#message_a").html(" 用 户 名 不 能 为 空 !") .css("color"，,"red"); 

其 中 ,$$ ("#message_a") 用 于 从 文档 中 查找 id 为 message_a 的 元 素 并 返回 一 个 jQuery 对 
象 , 通 过 对 该 jQuery 对 象 调用 html 方法 来 设置 匹配 元 素 的 HTML 内 容 , 然 后 再 次 返回 该 
对 象 ; 接着 通过 对 该 jQuery 对 象 调用 CSS 方法 在 所 匹配 元 素 中 设置 CSS 样式 属性 color 
的 值 , 这 是 一 个 典型 的 链 式 操作 , 它 的 功能 相当 于 下 面 两 个 JavaScript 语句 : 


document. getElementBYId("message_a"). innerHTML = "用 户 名 不 能 为 空 !"; 
document. getElementById( "message a"). style.color= "red"; 
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在 使 用 链 式 操作 时 ,对 于 同一 个 对 象 的 多 个 操作 ,通常 可 以 写成 一 行 ; 但 考虑 到 代码 的 
可 读 性 ,每 行 代码 最 好 不 要 超过 3 个 操作 ,也 可 以 按照 功能 块 将 代码 划分 成 多 行 ,而 且 每 行 


都 可 以 添加 注释 。 例 如 : 


$ ("#message_a").html(" 用 户 名 不 能 为 空 ") 


.Css("color", "red"); 


(15.2 jQuery 选择 器 


qq 


// 设 置 span 元 素 的 内 容 


// 设 置 span 元 素 的 文本 颜色 


选择 器 是 jQuery 最 基础 的 东西 , 它 的 功能 可 谓 强大 无 比 。 


195.2.1 


jQuery 选择 器 的 概念 


选择 器 允许 用 户 对 元 素 组 或 单个 元 素 进 行 操作 ,在 jQuery 中 ,对 事件 处 理 、 遍 历 DOM 


和 Ajax 操作 都 依赖 于 选择 器 。 


语法 : 
$ ("参数 ") 
说 明 ，: 


根据 选择 器 的 不 同类 型 ,所 带 参数 也 不 同 。 例 如 : 
var jQueryObject = $ ("# testDiv"); 


就 是 一 个 ID 选择 器 ,选择 ID 为 testDiv 的 DOM 对 象 ,并 将 它 放 入 jQuery 对 象 ,最 后 返回 


了 一 个 jQuery 对 象 。 
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jQuery 选择 器 的 分 类 


jQuery 选择 器 按照 功能 和 类 型 分 为 几 类 ,如 表 15-1 所 示 。 


表 15-1 jQuery 选择 器 的 分 类 


名 称 中 文 名 称 
Basic 基础 选择 器 
Hierarchy 层次 选择 器 
Basic Filters 基本 过 滤器 
Content Filters 内 容 过 滤器 
Visibility Filters 可 见 性 过 滤器 
Attribute Filters 属性 过 滤器 
Child Filters 子 元 素 过 滤器 
Forms 表单 选择 器 
Forms Filters 表单 过 滤器 


jQuery 选择 器 可 以 分 为 两 大 类 , 即 “ 选 择 ”" 和 “过 滤 ”。 选 择 的 作用 是 选择 元 素 , 过 滤 的 
作用 是 从 选中 的 元 素 中 筛选 元 素 , 如 果 只 使 用 过 滤器 ,相当 于 先 选 中 所 有 元 素 然后 过 滤 。 


15.2.3 基础 选择 器 


基础 选择 器 是 最 简单 的 选择 器 ,其 中 ID 选择 器 、 元 素 选择 器 都 是 JavaScript 原生 支持 
的 功能 ,所 以 在 jQuery 内 部 可 以 直接 调用 ,效率 较 高 。 
表 15-2 所 示 为 所 有 的 基础 选择 器 。 


表 15-2 ”基础 选择 器 
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名 称 中 文 名 称 说 明 举 例 
#id ID 选择 器 根据 元 素 ID 选择 $$ ("divld"): 选择 ID 为 divld 的 元 素 
element 元 素 选择 器 | 根据 元 素 的 名 称 选择 $("a"): 选择 所 有 二 a 二 元 素 
$(". bgRed"): 选择 所 用 CSS 类 为 
. class 样式 选择 器 | 根据 元 素 的 CSS 类 选择 bgRed 的 元 素 
关 全 选择 器 选择 所 有 元 素 $("*"): 选择 页 面 中 的 所 有 元 素 
selectorl, 可 以 将 几 个 选择 器 用 “,” 分 隔 , 然 后 拼 
selector2，| 多 重 选择 器 | 成 一 个 选择 器 字符 串 ,选择 时 会 同时 选 | $ ("# divld,a,. bgRed") 
selectorN 中 这 几 个 选择 器 匹配 的 内 容 


基础 选择 器 是 最 基础 且 最 常用 的 选择 器 。 根 据 选择 器 的 优化 原则 ,应 该 优先 使 用 ID 选 
择 器 和 element 选择 器 缩小 查找 范围 。 如 果 只 是 用 过 滤器 , 则 相当 于 使 用 了 “x ”选择 器 在 
所 有 元 素 中 过 滤 , 应 该 尽量 避免。 

15.2.4 层次 选择 器 


层次 选择 器 用 于 带 有 层次 关系 的 对 象 选择 。 在 进行 页 面 开发 时 大 家 经 常 遇 到 获取 一 个 
元 素 中 的 某 些 元 素 或 者 获取 相 邻 节点 元 素 的 使 用 场景 的 情况 ,此 时 层次 选择 器 就 可 以 帮助 


用 户 完 成 任务 。 


表 15-3 所 示 为 所 有 的 层次 选择 器 。 


名 称 


常用 中 文 名 


表 15-3 层次 选择 器 
说 明 


举 例 


后 代 选 择 器 


ancestor descendan 


使 用 “form input” 的 形式 选中 
form 中 的 所 有 input 元 素 , 即 
ancestor (祖先 ) 为 
descendant( 子 孙 ) 为 input 


form, 


$ ("bg. Reddiv"): 选择 CSS 类 为 
bgRed 的 元 素 中 的 所 有 二 div 
元 素 


选择 parent 的 直接 子 节点 child， 


$(". myList>1li"): 选择 CSS 类 


parent> child 子 代 选择 器 | 必须 包含 在 parent 中 并 且 直 接 父 | 为 myList 的 元 素 中 的 直接 子 节点 
类 是 parent 元 素 < 一 li 盖 对象 
prey 和 next 是 两 个 同 级 别 的 元 素 ,| $ (" # hibiscus 十 img"): 选择 ID 
层次 选择 器 | 选中 在 prey 元 素 后 面 的 next 元 素 | 为 hibiscus 的 元 素 后 面 的 img 对 旬 
$("# someDiv 一 [title]"): 选择 
选择 prey 后 面 的 根据 siblings 过 - 
prev~ siblings 层次 选择 器 滤 的 元 素 ,注意 siblings 是 过 滤器 ID 为 someDiv 的 对 象 后 面 带 有 


title 属性 的 所 有 元 素 
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“ancestor descendant” 后 代 选 择 器 是 最 常用 的 选择 器 ,但 是 大 家 要 注意 后 代 选 择 器 和 
子 代 选 择 器 的 区 别 , 很 多 时 候 使 用 后 代 选 择 器 和 子 代 选择 器 的 结果 是 相同 的 ,但 是 也 有 
例外 。 


15.2.5 基本 过 滤器 


过 滤器 和 选择 器 是 有 区 别 的 ,过 滤器 的 作用 是 在 已 经 选择 的 元 素 中 进行 "过滤 ”操作 , 因 
为 单独 使 用 过 滤器 ,相当 于 使 用 了 “ * ”这 个 全 选择 器 ,性 能 会 降低 ,所 以 在 使 用 过 滤器 时 一 
定 要 在 过 滤器 前 添加 选择 器 。 
表 15-4 所 示 为 所 有 的 基本 过 滤器 。 
表 15-4 基本 过 滤器 


名 称 说 明 举 例 
:first 匹配 找到 的 第 1 个 元 素 查找 表格 的 第 1 行 ， $("tr:first") 
:last 匹配 找到 的 最 后 一 个 元 素 查找 表格 的 最 后 一 行 : $ (tr:last") 
去 除 所 有 与 给 定 选 择 器 匹配 的 元 素 , 在 


查找 所 有 未 选中 的 input 元 素 ， 


:not(selector) | jQuery 1.3 中 已 经 支持 复杂 选择 器 了 $ Cinputsnot( :checked)") 


(例如 not(diva) 和 not(div,a)) 
匹配 所 有 索引 值 为 偶数 的 元 素 , 从 0 开 


:even 始 计数 查找 表格 的 1、3、5 等 行 ， $("tr.even") 
:0dd 有 当 引 砷 汐 有 入 四 宁 人 人 查找 表格 的 2.4.6 等 行 : $ ("tr. odd") 
始 计数 
匹配 一 元 素 ,ind 0 
:eq(index) ei ws 查找 第 2 行 : $ ("tr:eq(1)") 
dy 匹配 所 有 大 于 给 定 索引 值 的 元 素 ,index | 查找 第 2 行 ,第 3 行 , 即 索 引 值 是 1 和 2, 也 就 
» 从 0 开始 计数 是 比 0 大 : $C"tr:gt(0)") 
je 选择 索引 小 于 N 的 elements,index 从 0 | 查找 第 1 行 .第 2 行 , 即 索 引 值 是 0 和 1, 也 就 
Wi 开始 计数 是 比 2 小 : $C"trlt(2)") 
:header 选择 所 有 hl、h2、h3 类 的 header 标签 全 雁 因 内 的 所 有 标 二 加 土 并 条 各 


$ (":header"). css("background"," # EEE"); 


只 对 不 执行 动画 效果 的 元 素 执行 一 个 动画 特 
效 : $("#run"). click(function(){ $ (" div: 
not( :animated)"). animate({left:" 十 一 20"}， 
1000);}); 


:animated 匹配 所 有 正在 执行 动画 效果 的 元 素 


15.2.6 内 容 过 滤器 
表 15-5 所 示 为 所 有 的 内 容 过 滤器 。 
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表 15-5 ”内容 过 滤器 


名 称 说 有明 


举 例 


匹配 包含 给 定 文本 的 元 素 


:contains(text) 


查找 所 有 包含 “Tom” 的 div 元 素 : 


$ ("div:contains(Tom')") 


查找 所 有 不 包含 子 元 素 或 者 文本 的 空 元 素 : 


:empty 匹配 所 有 不 包含 子 元 素 或 者 文本 的 空 元 素 

$ ("td:empty") 

给 所 有 包含 p 元 素 的 div 元 素 添 加 一 个 
:has(selector) | 匹配 含有 选择 器 所 匹配 元 素 的 元 素 text 类 : 

$ ("div:has(p)"). addClass("text") 
sparent 匹配 含有 子 元 素 或 者 文本 的 元 素 ee 


$ ("td:parent") 


15.2.7 可 见 性 过 滤器 
表 15-6 所 示 为 所 有 的 可 见 性 过 滤器 。 


表 15-6 可见 性 过 滤器 


名 称 说 明 举 例 
:hidden 匹配 所 有 的 不 可 见 元 素 | 查找 所 有 display 为 none 的 tr 元 素 ;〈"tr:hidden") 
:visible 匹配 所 有 的 可 见 元 素 查找 所 有 display 不 为 none 的 tr 元素; $("tr:visible") 


15.2.8 属性 过 滤器 
表 15-7 所 示 为 所 有 的 属性 过 滤器 。 


表 15-7 属性 过 滤器 


名 称 说 了 明 


举 例 


[attribute] 


匹配 包含 给 定 的 属性 的 元 素 


查找 所 有 含有 ID 属性 的 div 元 素 : $ ("div[id]") 


匹配 给 定 的 属性 是 某 个 特定 
值 的 元 素 


[attribute= value] 


查找 所 有 name 属性 是 newsletter 的 input 元 素 : 
$ ("input[name= 'newsletter']"). ttr( "checked", 


true) 


匹配 给 定 的 属性 是 不 包含 某 


[attribute! 一 value] 


查找 所 有 name 属性 不 是 newsletter 的 input 元 素 ， 


$ ("input [name! = ' newsletter ' J]"). attr 


人 (“checked" ,true) 
给 以 某 些 
[attribute*=value] np 以 某 些 值 | $ ("input[name= news']") 
Lattribute$ 一 value] | 匹配 给 定 的 属性 是 以 某 些 值 | 查找 所 有 name 以 "letter 结尾 的 input 元素; 
La es 结尾 的 元 素 $ ("input[name $ = 'letter']") 
be ee 匹配 给 定 的 属性 是 以 包含 某 | 查找 所 有 name 包含 'little' 结 尾 的 input 元 素 : 
DWE” 0e。 | 些 值 的 元 素 $ ("input[name * — letter']") 


[attributeFilterl] 
[attributeFilter2] 
[attributeFilterN] 


复合 属性 选择 器 ,在 同时 满 
足 多 个 条 件 时 使 用 


找到 所 有 含有 ID 属性 ,并 且 它 的 name 属性 是 以 
man 结尾 的 元 素 : 
$(C"input[Lid]Lname$ = 'man']" 
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属性 过 滤器 是 最 常 使 用 的 过 滤器 ,使 用 属性 过 滤器 甚至 可 以 完成 许多 其 他 过 滤器 的 


功能 。 


15.2.9 表单 选择 器 
表单 选择 器 在 jQuery 官方 的 分 类 是 *Form”。 表 15-8 所 示 为 所 有 的 表单 选择 器 。 


表 15-8 表单 选择 器 


名 称 说 上 明 举 例 

:input 匹配 所 有 input、textarea、select 和 button 元 素 | 查找 所 有 form 元 素 : $ (" :input") 
:text 匹配 所 有 文本 框 查找 所 有 文本 框 : $ (" :text") 
:password 匹配 所 有 密码 框 查找 所 有 密码 框 : $ (" :password") 
:radio 匹配 所 有 单 选 按钮 查找 所 有 单 选 按钮 : $(":radio") 
:checkbox 匹配 所 有 复 选 框 查找 所 有 复 选 框 : $(" :checkbox") 
:Submit 匹配 所 有 提交 按钮 查找 所 有 提交 按钮 $ (" :submit") 
:image 匹配 所 有 图 像 域 匹配 所 有 图 像 域 ， $(" :image") 
:reset 匹配 所 有 重 置 按钮 查找 所 有 重 置 按钮 : $ (" ;reset") 
:button 匹配 所 有 按钮 查找 所 有 按钮 : $ (" :button") 
:file 匹配 所 有 文件 域 查找 所 有 文件 域 ，$ (" :file") 


15.2.10 子 元 素 过 滤器 


子 元 素 过 滤器 用 于 从 子 对 象 集合 中 过 滤 。 表 15-9 所 示 为 所 有 的 子 元 素 过 滤器 。 


表 15-9 子 元 素 过 滤器 


名 称 说 明 举 例 
匹配 其 父 元 素 下 的 第 N 个 子 或 奇偶 元 素 。':eq 
(index) ' 只 匹配 一 个 元 素 ,而 这 个 选择 符 将 为 
每 一 个 父 元 素 匹 配子 元 素 。 
:nth-child 从 1 开始 ,而 :eq 是 从 0 算 起 的 。 可 
:nth-child 人 在 每 个 ul 查找 第 2 个 li; 


(index/even/odd/equation)| 


:nth-child(even) 
:nth-child(odd) 
:nth-child(3n) 
:nth-child(2) 
:nth-childC3n 十 1) 
:nth-childC3n 十 2) 


$ ("ul li: nth-child(2)") 


匹配 第 一 个 子 元 素 ,':first' 只 匹配 一 个 元 素 ， 


在 每 个 ul 查找 第 1 个 li: 


Hote 而 此 选择 符 将 为 每 个 父 元 素 匹 配 一 个 子 元 素 | $C"al lisfirst-child") 
i 匹配 最 后 一 个 子 元 素 ,slast' 只 匹配 一 个 元 素 ,| 在 每 个 ul 查找 最 后 一 个 fi 
而 此 选择 符 将 为 每 个 父 元 素 匹 配 一 个 子 元 素 | $ ("ul lislast-child(2)") 
如 果 某 个 元 素 是 父 元素 中 唯一 的 子 元 素 ,将 会 
1 一 Ti: 
omehild 被 匹配 ,如 果 父 元 素 中 含有 其 他 元 素 , 则 不 会 | 在 凯 查 找 唯一 了 元素 的 开 


被 匹配 


$ ("ul li:only-child") 
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子 元 素 过 滤器 并 不 经 常 使 用 ,因为 通常 需要 过 滤 的 是 具有 某 些 业务 迎 辑 的 对 象 , 在 使 用 
时 需要 注意 nth-child 过 滤器 是 从 1 开始 的 ,而 eq 过 滤器 是 从 0 开始 的 。 
表单 过 滤器 


表单 过 滤器 根据 表单 的 属性 (例如 “可 用 ”“ 不 可 用 ”“ 选 中 ”等 状态 值 ) 对 选中 的 集合 进 
行 过 滤 。 表 15-10 所 示 为 所 有 的 表单 过 滤器 。 
表 15-10 表单 过 滤器 


W202 


名 称 说 明 举 例 
seabed 匹配 所 有 可 用 元 素 误 多 所 有 可 用 的 元 素 ， 
$ ("inpu:enabled") 
:disabled 匹配 所 有 不 可 用 元 素 查找 所 有 不 可 用 的 input 元 素 : 
$ ("input:disabled") 
i 查找 所 有 选中 的 复 选 框 元 素 : 
ee Ee $ ("input: checked") 
| 匹配 所 有 选中 的 option 元 素 碍 掀 所 有 渤 中 地 项 的 元 染 ， 


(15,3 查找 与 筛选 元 素 


jQuery 的 筛选 函数 提供 了 串联 \ 查 找 和 过 滤 函 数 ,为 用 户 的 jQuery 对 象 操作 带 来 了 很 
大 的 方便 。 
15.3.1 过 滤 函 数 


过 滤 函 数 的 作用 是 在 已 经 选 定 的 集合 中 将 与 过 滤 函 数 匹配 的 元 素 保留 ,不 匹配 的 则 去 
除 。 相 关 的 过 滤 函 数 如 表 15-11 所 示 。 


表 15-11 过 滤 函 数 
名 称 说 明 示 例 

eq(index) 返回 集合 中 索引 为 index 的 元 素 | $("#dtr").eq(2): 返回 匹配 的 第 3 个 元 素 
| 本 $C" # dv filter ("checked"): 返回 持 有 
filterCexpr) 按 指定 表达 式 筛 选 元 素 < checked” 类 的 元 素 

$C"td"). filter (function ( ) {return $ (this) 
filter(fn) 与 指定 函数 返回 值 匹配 的 元 素 | . css('eolor') 王 一 'red'; 
en 集合 )). ess("background-color" , "green"); 

将 表格 td 中 的 文字 颜色 由 红色 转 为 绿色 

待 匹 配 的 集合 元 素 中 只 要 存在 0 re pe 

esl 二 个 佛 样 .dipt 为 -tiue; 测 绕 闻 $ ("input"[type= "text']). parente(. )is( 'form') 


真 ,否则 返回 假 


上 述 表达 式 返 回 真 值 
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续 表 
名 称 说 明 示 例 
$(" 井 d").append($("input"). map(funetion() { 
map(callback) 将 一 组 元 素 转 为 数组 形式 return $ (this). val();})). getO). join(":"); 
将 表单 中 input 的 值 使 用 * :连接 为 值 的 列表 
$ "tr"). not($ ("tr:eq(0)")). css("background- 
Gea 从 筛选 结果 中 去 除 不 匹配 的 | color","gray"); 
颜色 将 表格 中 从 第 2 行 到 结束 行 的 背景 颜色 改 为 
“gray” 
slice(start,end) | 在 集合 元 素 中 截取 多 ("tr"). slice(0,2): 选择 tr 的 前 两 个 元 素 
15.3.2 查找 函数 


查找 函数 的 作用 是 从 集合 中 再 次 查找 匹配 元 素 ,相关 查找 函数 如 表 15-12 所 示 。 有 时 
过 滤 函 数 和 查找 函数 没有 明显 的 分 界 。 


表 15-12 查找 函数 列表 


名 称 说 明 示 例 
a pt id a 的 2 $ ("#d").add("<label>demo</label>") 
a €xpr. > 9 、JWuery 州 马 二 
HTML 字符 串 构建 一 个 label 并 添加 到 匹配 元 素 中 
children 选择 与 expr 匹配 的 直接 子 元 素 , 如 果 | $("#forml"). children() 
([expr]) 省 略 expr 则 选择 所 有 的 直接 子 元 素 ”| 选择 表单 forml 的 所 有 直接 子 元 素 


contents() 


返回 匹配 元 素 内 的 所 有 子 节点 (包含 文 
本 节点 ) 


$ ("#d#forml"). contents(). css( 'color, 'red') 
将 匹配 元 素 的 所 有 直接 子 元 素 的 文字 颜色 设置 
为 “red” 


$$("#d"). find("label") 与 $("d label") 的 作用 


fndexpp | 返回 所 有 与 指定 表达 式 匹配 的 元 素 | 4 辣 
、 、 ee $ ("input[type= 'submit']"). next() 
next(expr) 泛 司 5 指 征 雪 闪光 于 本 的 近 全 无 衣 的 选择 与 类 型 为 “submit” 的 input 相 邻 的 兄弟 
相 邻 元 素 集合 Ei 
AICCU | 运 问 与 指定 表 这 式 区 本 的 元 素 的 所 有 | $ (fd nextAUO 
同 非 元 素 集合 选择 匹配 元 素 的 所 有 同 韭 元 素 
返回 一 个 匹配 表达 式 的 所 有 元 素 的 共 | $ ("#forml"). parent() 
DParent([expr]) | 后 且 唯 一 的 父 元 素 选择 匹配 元 素 的 父 元 素 
返回 一 个 包含 匹配 元 素 的 祖先 元 素 的 | $ ("input"). parents() 
Bid 选择 匹配 元 素 的 所 有 祖先 元 素 
返回 与 指定 表达 式 匹配 的 元 素 集 合 中 | $ ("p"). prevO) 
Prev([exp 中 》 | 的 每 个 元 素 之 前 的 所 有 元 来 集合 。 | 选择 匹配 元 素 的 相 邻 的 前 一 个 同 非 元 素 集合 
查 我 匹配 表达 式 元 素 之 前 的 所 有 同 莫 | $ ("# commandQuery"). prevAllC 
Wd 选择 匹配 元 素 之 前 的 所 有 同 非 元 素 
at 返回 一 个 包含 匹配 元 素 集合 中 每 一 个 | $ ("#4d"). siblings() 
元 素 的 所 有 唯一 同 非 元 素 的 元 素 集合 | 选择 匹配 元 素 的 所 有 同 奉 元 素 
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15.3.3 用 jQuery 操作 DOM 


在 jQuery 中 ,attributes 函数 用 来 操作 DOM 元 素 的 属性 和 样式 。 一 些 函 数 会 出 现在 
多 种 分 类 中 ,attributes 函数 如 表 15-13 所 示 。 


表 15-13 attributes 函数 列表 


jQuery 


函数 名 称 


函数 说 明 


.addClass 


为 选中 的 元 素 添 加 样式 


-attr 


获取 或 者 设置 元 素 的 属性 


.hasClass 


判断 选中 的 元 素 是 否 包含 了 指定 的 样式 


.html 


获取 或 者 设置 元 素 的 HTML 内 容 


. TemoveAttr 


为 选 定 的 对 象 移 除 指定 的 属性 


. removeClass 


为 选 定 的 对 象 移 除 指定 的 样式 


.text 


获取 或 者 设置 元 素 的 文字 内 容 


.Var 


获取 或 者 设置 元 素 的 值 


与 操作 元 素 属性 相关 的 函数 如 表 15-14 所 示 。 


表 15-14 attr 函数 的 用 法 


函数 名 称 函数 说 明 返回 值 
.attr(attrName) 取得 第 一 个 匹配 元 素 的 属性 值 ,如 属性 不 存在 返回 undefined 字符 串 
.attr(attrName. value) 为 所 有 匹配 的 元 素 设置 属性 值 无 
.attr(map) 将 一 个 “ 键 / 值 " 对 形式 的 对 象 为 所 有 匹配 元 素 设置 属性 和 值 无 
.removeAttr(attrName) | 移 除 匹配 元 素 的 属性 无 

与 操作 元 素 CSS 相关 的 函数 如 表 15-15 所 示 。 
表 15-15 CSS 函数 

函数 名 称 函数 说 明 返回 值 
.addClass(className) 为 匹配 的 元 素 增加 指定 的 样式 无 
.removeClass(className) | 为 匹配 的 元 素 移 除 指定 的 样式 无 
. hasClass(className) 判定 选中 的 元 素 是 否 包含 指定 的 样式 布尔 
.Css(propName) 返回 第 一 个 匹配 元 素 指定 的 CSS 属性 值 字符 串 
.Css(propName. value) 为 匹配 的 元 素 设 置 指定 的 CSS 属性 值 无 
.css(map) 将 一 个 “ 键 / 值 " 对 形式 的 对 象 为 所 有 匹配 元 素 设置 CSS 属性 无 
.height() 获取 选中 元 素 的 高 度 数值 
+ height(val) 设置 选中 元 素 的 高 度 无 
. weight() 获取 选中 元 素 的 宽度 数值 
. weight(val) 设置 选中 元 素 的 宽度 无 
.innerHeight([val]) 获取 /设置 选中 元 素 内 部 区 域 的 高 度 数值 /无 
.innerWeight([val]) 获取 /设置 选中 元 素 内 部 区 域 的 宽度 数值 /无 
.outerHeight([val]) 获取 /设置 选中 元 素 外 部 区 域 的 高 度 数值 /无 
.outerWeight([val]) 获取 /设置 选中 元 素 外 部 区 域 的 宽度 数值 /无 
. position([val]) 获取 /设置 选中 元 素 相对 于 父 元 素 的 偏 移 数值 /无 
.offset([val]) 获取 /设置 选中 元 素 相对 当前 窗口 的 偏 移 数值 /无 
.toggleClass(className) | 如 果 存 在 (不 存在 ) 就 删除 (添加 样式 ) 无 
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jQuery 还 提供 了 html() 和 text() 函数 改 变 元 素 的 内 容 , 如 表 15-16 所 示 。 


表 15-16 html() 和 text() 函 数 


函数 名 称 函数 说 明 返 回 值 
.html() 取得 第 一 个 匹配 元 素 的 HTML 内 容 字符 串 
. html(htmlStr) 设置 所 有 匹配 的 元 素 的 HTML 内 容 无 
. text 取得 第 一 个 匹配 元 素 的 文字 内 容 字符 串 
. test(str) 设置 所 有 匹配 元 素 的 文字 内 容 无 


65. 4 jQuery 工具 函数 
2 


工具 函数 是 指 在 jQuery 对 象 ( 即 变量 "$") 上 定义 的 函数 。 


15.4.1 


浏览 器 特性 检测 


由 于 历史 原因 ,各 种 不 同 核心 浏览 器 的 不 同 版 本 支持 的 功能 也 不 尽 相同 。 出 于 对 不 同 
浏览 器 的 兼容 性 的 考虑 ,需要 检查 当前 浏览 器 的 版 本 ,从 而 做 出 相应 的 处 理 。 
jQuery 检查 浏览 器 类 型 .浏览 器 版 本 ,浏览 器 支持 的 属性 有 以 下 几 种 : 


1. jQuery. support 


jQuery. support 是 一 组 用 于 展示 不 同 浏览 器 各 自 特性 和 bug 的 属性 集合 ,其 检测 的 属 
性 如 表 15-17 所 示 。 


表 15-17 jQuery. support 检测 的 属性 


属性 名 称 说 明 

如 果 这 个 页 面 和 浏览 器 是 以 W3C CSS 盒 式 模型 来 泻 染 的 , 则 等 于 true。 通 常 在 IE 6 
boxModel 和 正 7 的 怪 准 CQuriks Mode) 模 式 中 ,这 个 值 是 false。 在 document 准备 就 绪 前 ,这 

个 值 是 null 

如 果 用 cssFloat 来 访问 css 的 float 的 值 , 则 返回 true。 目 前 ,在 IE 中 会 返回 false, 用 
cssFloat 

styleFloat 代替 

如 果 浏 览 器 从 getAttribute("href") 返 回 的 是 无 变化 的 结果 , 则 返回 true。 在 正中 会 
hrefNormalized 返回 fal 
alse 


htmlSerialize 


如 果 浏 览 器 通过 innerHTML 插入 链接 元 素 的 时 候 会 序列 化 这 些 链 接 , 则 返回 true。 
目前 ,在 I 下 中 会 返回 false 


如 果 浏 览 器 在 复制 元 素 的 时 候 不 会 连同 事件 处 理 函 数 一 起 复制 , 则 返回 true。 目 前 ， 


noCloneEvent 在 正中 会 返回 false 
objectAll 如 果 在 某 个 元 素 对 象 上 执行 getElementsByTagName(" * ") 会 返回 所 有 子孙 元 素 , 则 
为 true。 目 前 ,在 IE 7 中 为 false 
和 使 用 append Child/createTextNode 方 法 插入 脚本 代码 时 浏览 器 是 否 执 行 脚本 ,在 I 下 
scriptEval 中 返回 false 
style 如 果 getAttribute("style") 返 回 元 素 的 行内 样式 , 则 为 true。 在 正 中 为 false 
a 如 果 浏 览 器 允许 table 元 素 不 包含 tbody 元 素 , 则 返回 true。 目 前 ,在 正 中 会 返回 


false,IE 会 自动 插入 缺失 的 tbody 
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代码 示例 : 


证 (jQuery. support. tbody) {alert(" 包 含 tbody 元 素 ");} 


2. jQuery. browsername 


jQuery. browsername 用 于 检查 是 哪 种 浏览 器 ,目前 支持 4 种 主流 浏览 器 : 
(1) IE: msie。 

(2) Firefox: mozilla。 

(3) Opera: opera, 

(4) Safari: safari。 

代码 示例 : 


if( $ .browser. safari){alert("this is safari!");} 


3. jQuery. browser. version 
jQuery. browser. version 用 于 显示 浏览 器 的 版 本 号 。 
4. jQuery. boxModel 


jQuery. boxModel 用 于 检查 当前 页 面 中 浏览 器 是 否 使 用 标准 盒 模型 泻 染 页 面 , 建 议 使 
用 jQuery. support. boxModel 代替 W3C CSS 盒 模型 。 

在 Internet Explorer 怪 韵 (Quirks Mode) 模 式 中 返回 false。 

代码 示例 : 


$ .boxModel 


15.4.2 数组 和 对 象 操作 


数组 是 非常 重要 的 概念 ,在 jQuery 中 对 此 提供 了 一 系列 的 函数 ,数组 的 相关 函数 如 
表 15-18 所 示 。 


表 15-18 jQuery 数组 的 相关 函数 


函数 名 称 函数 说 明 返回 值 
可 用 于 遍历 任何 对 象 。 回 调 函 数 拥有 两 个 参数 ,第 一 个 为 对 象 的 
成 员 或 数组 ,第 二 个 为 对 应 变量 或 内 容 。 如 果 需 要 退出 each 循 | 对 象 
环 ,可 以 使 回调 函数 返回 false 

用 一 个 或 多 个 其 他 对 象 来 扩展 一 个 对 象 ,返回 被 扩展 的 对 象 。 如 
果 不 指定 target, 则 对 jQuery 命名 空间 本 身 进行 扩展 。objl ~ | 对 象 
objn 为 将 合并 到 target 的 对 象 

使 用 过 滤 函 数 过 滤 数 组 元 素 。 此 函数 至 少 传递 两 个 参数 , 即 待 过 
滤 数 组 和 过 滤 函 数 ,过 滤 函 数 必须 返回 true 以 保留 元 素 或 返回 
false 以 删除 元 素 。 如 果 “invert” 为 false 或 未 设置 , 则 函数 返回 数 | 数组 
组 中 由 过 滤 函 数 返回 true 的 元 素 , 当 “invert "为 true 时 , 则 返回 过 
滤 函 数 中 返回 false 的 元 素 集 


.each(obj, callback (index, 
val)) 


. extend (target, [objl], 
[objn]) 


. grep(array, fn(element. 
index, [invert])) 
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续 表 


函数 名 称 


函数 说 了 明 


返回 值 


. makeArray(obj) 


将 类 数组 对 象 转换 为 数组 对 象 。 类 数组 对 象 有 length 属性 ,其 成 
员 索 引 为 0 至 length-1。 实 际 上 此 函数 在 jQuery 中 自动 使 用 而 无 
须 特意 转换 。obj 为 类 数组 对 象 


数组 


. map(array. callback (elemer, 


index)) 


将 一 个 数组 中 的 元 素 转换 到 另 一 个 数组 中 。 作 为 参数 的 转换 函 
数 会 为 每 个 数组 元 素 调 用 ,而 且 会 给 这 个 转换 函数 传递 一 个 表示 
被 转换 元 素 作为 参数 。 转 换 函 数 可 以 返回 转换 后 的 值 、null( 删 除 
数组 中 的 项 目 ) 或 一 个 包含 值 的 数组 ,并 扩展 至 原始 数组 中 


数组 


.inArray(value,array) 


确定 第 1 个 参数 在 数组 中 的 位 置 ,从 0 开始 计数 (如 果 没 有 找到 
则 返回 一 1) 


数值 


.isArray(obj) 


测试 对 象 是 否 为 数组 


布尔 


. merge(first,second) 


合并 两 个 数组 。 返 回 的 结果 会 修改 第 1 个 数组 的 内 容 一 一 第 1 
个 数组 的 元 素 后 面 跟 着 第 2 个 数组 的 元 素 


数组 


. Unique(array) 


除数 组 中 的 重复 元 素 , 只 处 理 删除 DOM 元 素数 组 ,不 能 处 理 字符 
串 或 者 数字 数组 


数组 


. parseJSON(json) 


接受 一 个 JSON 字符 串 , 返 回 解析 后 的 对 象 。 传 人 一 个 非法 的 
JSON 字符 串 会 锰 出 异常 


15.4.3 其 他 工具 函数 


jQuery 还 包含 很 多 实用 的 工具 函数 ,在 实际 使 用 中 最 常用 的 莫 过 于 字符 串 去 空格 操作 
及 判断 函数 ,如 表 15-19 所 示 。 


表 15-19 常用 的 其 他 工具 函数 


字符 串 


函数 名 称 函数 说 明 返回 值 
. trim(str) 去 掉 字符 串 起 始 和 结尾 的 空格 字符 串 
.isEmptyObject(obj) | 测试 对 象 是 否 为 空 对 象 (不 包含 任何 属性 ) 布尔 
.isFunction(obj) 测试 对 象 是 否 为 函数 布尔 
.isPlainObjectCobj) 测试 对 象 是 否 为 纯粹 的 对 象 (通过 “{} "或 者 "new Object" 创建 的 ) 布尔 
. isNumeric(val) 测试 对 象 是 否 为 一 个 数字 布尔 
.isWindow(obj) 测试 对 象 是 否 为 窗口 (有 可 能 是 Frame) 布尔 


(5,5 jQuery UI 


jQuery UI 是 以 jQuery 为 基础 的 开源 JavaScript 网 页 用 户 界面 代码 库 , 包 含 底层 用 户 
交互 ,动画 、 特 效 和 可 更 换 主 题 的 可 视 控 件 。 


但,5.1 


jQuery UI 基础 


jQuery UI 是 jQuery 的 官方 插件 .是 在 jQuery 之 上 开发 的 专门 用 于 UI 交互 的 类 库 的 ， 
使 用 jQuery UI 最 直接 的 方法 就 是 使 用 它 提供 的 UI 控件 ,例如 日 历 框 、 弹 出 框 等 。 另 外 ,还 
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可 以 基于 jQuery UI 提供 的 底层 控件 接口 (例如 可 拖 忠 、 可 拉 伸 等 ) 来 开发 控件 。 

jQuery UI 提供 了 丰富 的 “皮肤 ”(“ 主 题 ”), 所 以 可 以 快速 地 更 换 控 件 的 样式 。jQuery 
UI 的 在 线 网 站 十 分 强大 ,用 户 在 下 载 时 可 组 装 想 要 的 功能 定制 下 载 。 

jQuery UI 包括 下 面 4 个 部 分 。 

(1) Interacttions( 交 互 ): Interactions 表示 提供 底层 的 用 户 交 互 特效 。 例 如 可 以 为 一 
个 div 添加 控件 拖 动 功能 、 重 置 大 小 功能 。 可 以 说 这 是 一 组 底层 特效 接口 ,用 户 可 以 在 这 些 
特效 的 基础 上 开发 控件 。 

(2) Widgets( 页 面 控件 ): Widgets 是 在 Interactions 的 基础 上 已 经 由 jQuery UI 开发 
好 的 可 以 快速 使 用 的 用 户 页 面 控 件 , 例 如 弹出 框 控 件 、Tab 控件 .日 历 控件 等 。 

(3) Efffects( 页 面 效 果 ): Effects 是 指 easmg 特效 ,在 jQuery UI 中 提供 了 各 种 不 同 的 
easing() 函 数 及 各 种 定义 好 的 动画 特效 。 

(4) Utilities( 工 具 集 ): Utilities 提供 了 底层 的 工具 函数 ,用 来 实现 用 户 交互 .各 种 控件 


15.5.2 ”Datepicker 控件 


日 历 控件 是 每 一 个 Web 应 用 都 不 可 或 缺 的 控件 。jQuery UI 提供 了 日 历 控件 
Datepicker。 日 历 控件 Datepicker 依赖 jQuery UI 的 UI Core 组 件 部 分 。Datepicker 控件 
的 可 配置 性 和 扩展 性 非常 高 ,例如 可 以 配置 日 期 格式 .语言 .日 期 范围 等 ,并 且 提 供 了 各 种 事 
件 和 方法 ,便于 用 户 加 入 业务 逻辑 ,Datepicker 还 支持 以 下 键盘 操作 。 

。 page up/down: 更 改 月 份 。 

。 ctrl 十 page up/down: 更 改 年 份 。 

。 ctrl 十 home: 回 到 本 月 。 

。 ctrl 十 left/right: 选择 上 一 天 或 下 一 天 。 

。 ctrl 十 up/down: 选择 上 一 周 或 下 一 周 。 

。 enter: 选中 日 期 。 

。 ctrl 十 end: 关闭 日 历 并 清空 选中 日 期 。 
esc: 关闭 日 历 不 选择 日 期 。 


1. 属性 


日 历 控件 的 属性 说 明 如 表 15-20 所 示 。 
表 15-20 日 历 控件 Datepicket 的 属性 说 明 


参数 名 称 数据 类 型 默 认 值 说 明 
通过 此 属性 可 以 控制 日 历 框 是 否 
disabled Boolean false 
有 效 
另外 一 个 元 素 的 选择 器 表达 式 ,在 选 
altField String 0 中 日 期 时 使 用 altFormat 属性 定义 的 
日 期 格式 ,将 选中 日 期 放 入 此 元 素 
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MV 


续 表 


参数 名 称 


数据 类 型 


说 明 


altFormat 


String 


填充 altField 表达 式 选中 元 素 的 日 期 
格式 


appendText 


String 


在 日 期 控件 的 页 面 元 素 后 面 加 入 一 
段 文字 。 经 测试 是 加 入 了 一 段 span， 
例如 : 

$ (". selector"). datepicker 
({appendText: '(yyyy-mm-dd) '})); 
加 入 的 HTML 为 ， 

=span class"ui-datepicker-append"> 
(yyyy-mm-dd)<=/span> 


autoSize 


Boolean 


false 


是 否 自动 设置 input 元 素 的 大 小 ,如 
果 设 置 为 true, 将 根据 dateFormat 属 
性 格式 化 后 的 日 期 字符 串 重 置 input 
元 素 的 大 小 


buttonImage 


String 


弹出 按钮 图 片 的 URL 地 址 。 如 果 设 
置 了 此 属性 , 则 buttonText 属性 会 包 
含 此 图 片 的 alt 和 title 属性 


buttonImageOnly 


Boolean 


false 


在 默认 情况 下 ,如 果 将 “showOn” 属 
性 设置 为 “button” 或 “both”, 将 在 
input 后 添加 一 个 元 素 , 也 可 能 用 来 
显示 日 历 。 默 认 添 加 buttonImage 会 
在 button 内 部 添加 一 张 图 片 , 如 果 将 
此 属性 设置 为 true, 则 会 将 button 元 
素 变 成 img 元 素 


button Text 


String 


指定 触发 按钮 上 显示 的 文本 


calculate Week 


Function 


S. datepicker. iso8601 Week 


根据 日 期 计算 本 周 是 第 几 周 的 函数 ， 
它 是 根据 ISO8601 标准 实现 的 ,每 周 
一 是 一 周 的 开始 ,每 年 的 第 一 周 是 包 
含 本 年 第 一 个 星期 四 的 一 周 


changeMonth 


Boolean 


false 


true 表示 允许 从 下 拉 框 更 改 月 份 


changeYear 


Boolean 


false 


true 表示 允许 从 下 拉 框 更 改 年 份 


closeText 


String 


"Donen 


关闭 按钮 的 文件 ,这 是 一 个 区 域 化 属 
性 ,例如 如 果 选 择 了 中 文 语言 包 , 则 
会 使 用 此 语言 包 的 此 属性 ,需要 在 使 
用 “showButtonPanel” 属 性 显示 关闭 
按钮 时 此 属性 才 起 作用 


constrainInput 


Boolean 


true 


如 果 设 置 为 true, 则 为 input 中 
dateFormat 定义 的 格式 中 允许 的 字 
符 ( 只 限制 字符 不 限制 格式 ) 


currentText 


String 


"Today”" 


“今天 ”按钮 显示 的 文字 ,与 “closeText” 
属性 一 样 是 区 域 化 的 文字 之 一 ,需要 配 
合 “showButtonPanel” 属 性 使 用 
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续 表 


参数 名 称 


数据 类 型 


默 认 值 


说 有明 


dateFormat 


String 


"mm/dd/yy" 


日 期 格式 文字 串 , 控 制 选中 日 期 后 填 
充 的 格式 , 它 是 区 域 化 属性 之 一 ,例如 
中 文 语言 包 会 自动 改 成 "yy-mmrdd” 


dayNames 


Array 


['Sunday', 'Monday', 
'Tuesday', 'Wednesday', 
"Thursday', 'Friday', 'Saturday'] 


每 天 是 星期 几 的 文字 , 它 是 区 域 属性 
之 一 ,从 星期 日 开始 。 此 文字 是 星期 
的 全 名 ,会 出 现在 选中 后 的 input 文 
字 中 ,以 及 当 鼠 标 停留 在 日 历 框 的 
dayNamesMin( 星 期 简写 ) 上 时 显示 
的 文字 。 使 用 中 文 语言 包 会 设置 为 
[' 星 期 日 ',' 星 期 一 ',' 星 期 二 ',' 星 期 三 
",' 星 期 四 ', ' 星 期 五 ', "星期 六 门 


dayNamesMin 


Array 


['Su', 'Mo', 'Tu', 'We', 'Th', 
‘Fr','Sa"] 


星期 最 简单 的 缩写 ,在 弹出 框 上 会 显 
示 此 文字 , 它 是 区 域 属性 之 一 ,中 文 
语言 包 会 设置 为 [' 日 ',' 一 ',' 二 ',' 三 '， 


' 四 '",' 五 ',' 六 ] 


dayNamesShort 


Array 


['Sun', 'Mon', 'Tue', 'Wed',' 
Thu', 'Fri', 'Sat'] 


星期 的 缩写 。 和 dayNameMin 的 不 
同 之 处 是 它 用 在 选中 日 期 后 填充 
Input 时 使 用 。 中 文 语言 包 会 设置 为 
[' 周 日 ',' 周 一 ',' 周 二 ',' 周 三 ',' 周 四 '， 
' 周 五 ', ' 周 六 


defaultDate 


Date, 
Number, String 


null 


如 果 input 没有 日 期 , 则 日 历 框 打开 
后 会 高 亮 显示 defaultDate 中 设置 的 
日 期 ,此 高 亮 是 鼠标 悬浮 在 某 日 期 上 
时 的 高 亮 效 果 ,而 不 是 选中 日 期 的 高 
亮 效 果 。 如 果 直 接 按 下 回 车 , 则 会 在 
input 中 填充 此 日 期 


duration 


String, Number 


日 历 框 动画 效果 的 渐变 时 间 


firstDay 


Number 


设置 每 周 的 第 一 天 是 星期 几 ,0 表示 
星期 日 , 它 是 区 域 属性 ,中 文 语言 包 
中 将 此 值 设置 为 1 


gotoCurrcnt 


Boolean 


false 


如 果 设 置 为 true,“ 回 到 当前 日 期 ” 连 
接 将 改 为 回 到 选中 的 日 期 ,默认 为 回 
到 今天 


hideIfNoPrevNext 


Boolean 


false 


如 果 设 置 为 true, 则 当 超 过 了 
minDate 和 maxDate 设置 的 日 期 时 上 
一 个 月 和 下 一 个 月 的 链接 将 不 显示 


isRTL 


Boolean 


false 


是 否 为 “Right To Left”( 右 到 左 ), 有 
的 语言 是 从 右 到 左 阅读 的 


maxDate 


Date, 
Number, String 


null 


可 以 选择 的 最 大 日 期 


minDate 


Date, 


Number, String 


null 


可 以 选择 的 最 小 日 期 
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续 表 


参数 名 称 数据 类 型 


默 认 值 


说 明 


monthNames Array 


[ ' January ' ，' February ' ， 
"March','April','May', June' "| 
July', 'August', 'September', ' 


October ' , ' November ' ， 


'December'] 


每 个 月 的 全 名 , 它 是 区 域 属性 , 中文 
语言 包 为 [一 月 ',' 二 月 ',' 三 月 ",' 四 月 
， 五 月 ,六 月 ,七 月 ,人 月 , 力 朋 
,十 月 ,十 一 月 ,十 二 月 人 


monthNamesShort | Array 


[Jan','Feb','Mar','Apr'， 
"May', Jun' Jul', 'Aug', Sep， 
'Oct', Nov' 'Dec'] 


每 个 月 的 缩写 , 它 是 区 域 属性 ,中 文 
语言 包 为 [一 … 一 "三 四 "五 "六 
Wn hh bs 30a Bb sai 


navigationAsDate 
Boolean 
Format 


false 


如 果 设 置 为 true, 则 formatDate() 函 
数 会 作用 在 nextText、 prevText 和 
currentText 属性 上 ,允许 它们 使 用 日 
期 作为 文字 内 容 


nextText String 


"Next" 


下 一 个 月 按钮 的 提示 文字 


numberOfMonths |Number,Array 


一 次 显示 几 个 月 份 。 如 果 传 递 数字 ， 
则 表示 在 一 行 中 显示 几 个 月 份 ,也 可 
以 传递 一 个 含有 两 个 元 素 的 数组 。 
例如 ,[2,3] 表 示 显 示 两 行 ,每 行 显示 
3 个 月 份 


prevText String 


上 一 个 月 按钮 的 提示 文字 


selectOtherMonths |Boolean 


只 有 当 selectOtherMonths 被 设置 为 
true 时 才 生 效 ,在 当月 显示 的 其 他 月 
份 的 日 期 可 以 被 选中 


shourt YearCutoff |String, Number 


"十 10" 


设置 截止 年 份 的 值 。 如 果 是 0 一 99 
的 数字 , 则 从 当前 年 份 开始 算 起 ; 如 
果 为 字符 串 , 则 相应 地 转换 为 数字 后 
再 与 当前 年 份 相 加 ; 当 超过 截止 年 份 
时 , 则 被 认为 是 上 一 个 世纪 


showAnim String 


"show" 


设置 显示 、 隐 藏 日 期 插件 的 动画 的 
名 称 


showCurrentAtPos | Number 


设置 在 多 月 份 显示 的 情况 下 当前 月 
份 显示 的 位 置 , 自 顶 部 左边 开始 第 
XX 位 


show Month After 


Boolean 
Year 


是 否 在 面板 的 头 部 年 份 后 面 显示 
月 份 


showOn String 


设置 什么 事件 触发 显示 日 期 插件 的 
面板 ,可 选 值 有 focus、button 和 both 


showOptions Options 


如 果 使 用 showAnim 显示 动画 效果 ， 
可 以 通过 此 参数 增加 一 些 附加 的 参 
数 设 置 
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续 表 
参数 名 称 数据 类 型 默 认 值 说 明 
过 站 外 
showOtherMonths |Boolean false i my 
stepMonths Number 1 当 单 击 上 /下 一 月 时 一 次 翻 几 个 月 
控制 年 份 的 下 拉 列 表 中 显示 的 年 份 
yearRange String "一 10: 十 10" 数量 ,可 以 是 相对 当前 年 ,也 可 以 是 
绝对 值 
2, 方法 
1) 实例 方法 


日 期 选择 器 也 有 destroy、disable、enable 和 option 方法 。 


$ (selector). datepicker("isDisabled"); // 是 否 被 禁用 

$ (selector).datepicker("hide", [speed]); // 关 闭 选 择 器 , speed 为 速度 

$ (selector). datepicker("show"); // 调 用 先前 的 选择 器 

$ (selector). datepicker("getDate" ) ; // 获 取 选 择 器 中 的 当前 日 期 

$ (selector). datepicker("setDate", date); // 设 置 当前 日 期 可 以 为 02/26/2011 或 +lm+ ?7d 等 


2) 全 局 方法 


$ .datepicker. setDefaults(Options); // 设 置 所 有 选择 器 的 默认 属性 

$ .datepicker. formatDate( format, date, setting); //format 为 字符 捉 ,日 期 格式 , Date 为 要 显示 
的 日 期 值 , Setting 为 可 选项 , 其 值 是 对 象 

$ .datepicker. parseDate(format, value, setting); //value 为 字符 串 , 包 含 待 提取 的 日 期 值 


3. 事件 


1) beforeShowDay 事件 
当选 择 器 上 的 每 一 天 显示 之 前 触发 此 事件 。 
事件 绑 定 ， 


$ (selector). datepicker( { (beforeShowDy:function(date){}}); 


date 表示 一 个 日 期 ,该 函数 必须 返回 一 个 数组 。[0]: true 或 false 表示 是 否 可 选 ; [1]: 
表示 此 日 期 的 CSS 类 名 ,默认 为 ""; [2]: 表示 元 素 是 此 日 期 的 一 个 弹出 提示 (可 选 )。 

2) onChangeMonthYear 事件 

当选 择 器 移动 到 新 的 年 份 或 月 份 时 触发 。 

事件 绑 定 : 

$ (selector) . datepicker( {onChangeMonthYear, function( year, month, inst){ }}); 

year 表示 所 选 的 年 份 ; month 表示 所 选 的 月 份 (1 一 12); inst 表示 日 期 选择 器 , 它 指向 
所 关联 的 输入 控件 。 

3) onClose 事件 

当选 择 器 关闭 时 触发 。 
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事件 绑 定 : 
$ (selector) . datepicker({onClose:funct:ion(dateText, inst){ }}); 


dateText 表示 所 选择 的 日 期 为 文本 字符 串 , 如 未 选择 , 则 为 ""; inst 表示 日 期 选择 器 
实例 。 

4) onSelect 事件 

当选 择 一 个 日 期 时 触发 。 

事件 绑 定 : 


$ (selector) .datepicker({onSelect:function(dateText, inst){ }}); 
参数 同上 。 
15.5.3 Button 控件 


Button 控件 能 够 将 表单 元 素 、 各 种 类 型 的 input 元 素 ( 例 如 submit) ,a 元 素 等 变 成 按钮 
样式 显示 ,并 且 具 有 mouseover 等 样式 效果 。 


1. 属性 
Button 控件 的 属性 如 表 15-21 所 示 。 


表 15-21 Button 控件 的 属性 说 明 


属性 | 数据 类 型 默 认 值 说 明 
text Boolean |true 是 否 显 示 文本 ,车 为 false, 必 须 启用 图 标 
Icons Option {primary:null secondary:null} 指定 显示 的 图 标 ,属性 值 为 字符 申 类 名 ! 和 因为 在 
边 的 图 标 和 右边 的 图 标 
label String 按钮 的 value 属性 按钮 上 显示 的 文本 


2. 方法 
按钮 控件 也 有 disable ,enable .option ,destroy 等 方法 。 


$ (selector). button( [options]); // 普 通 按 钮 的 构造 方法 

$ (selector). buttonset( ); // 单 选 按钮 或 复 选 框 的 构造 方法 
3. 事件 

create 事件 的 类 型 为 buttoncreate, 当 按钮 创建 时 触发 。 

代码 示例 : 


// 提 供 一 个 回调 函数 对 enable 事件 进行 操作 
$ ('.selector'). button({create:function(event, ui){...}}); 
// 使 用 buttoncreate 类 型 绑 定 create 事件 


$ ('. selector').on("buttoncreate", function(event, ui){}); 
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(5,6 综合 应 用 


利用 jQuery 制作 一 个 图 片 放大 显示 的 效果 。 

(1) 查找 素材 ,并 利用 Photoshop 处 理 图 片 。 

建立 images 文件 夹 ,将 素材 图 片 保存 在 该 文件 夹 下 。 

(2) 下 载 并 使 用 jQuery 编写 JavaScript 客户 端 脚本 文件 。 
下 载 jquery. js 文件 。 

@ 编写 photo. js 文件 ,代码 如 下 : 


$ (document). ready(function(){ 
$ ('.photo_slider').each(function(){ 


Var $this = 


$ (this).addClass( 'photo — area'); 


var $ img = $ this.find('img'); 


var $ info = 


$ this. find( '. info area'); 


var opts = {}; 


$ img. ready( function( ){ 
opts. imgw = $ img.width(); 
opts. imgh = $ img. height(); 


DD); 


opts.orgw = $ this.width(); 


opts.orgh = 


$ img.css ({ 


$ this. height(); 


marginLeft: " — 150px", 
marginTop: "一 150px" 


D); 


var $ wrap 


0 


var $ open 


var $close = 


opts. wrapw = 
opts. wraph = 


$ (< div class = "photo slider img">').append( $ img). prependTo( $ this); 
$ (<ahref=" 井 "class= "more info"> More Info &gt;</a>').appendTo( $ this); 
$ ('<a class= "close"> Close </a>').appendTo( $ info); 


$ wrap. width( ); 
$ wrap. height(); 


$ open. click(function(){ 


$ this.animate({ 
width: opts. imgw, 
height: (opts. imgh+ 95), 
borderWidth: "10" 


}, 600 ); 
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$ open. fadeOut( ); 


$ wrap. animate( { 
width: opts. imgw, 
height: opts. imgh 
}, 600 ); 


$ (".info area", $ this). fadeIn(); 


$ img.animate({ 
marginTop: "Opx", 
marginLeft: "Opx" 
}, 600 ); 


return false; 


D); 


$ close. click(function(){ 
$ this. animate( { 
width: opts. orgw, 
height: opts. orgh, 
borderWidth: "1" 
}, 600 ); 


$ open. fadeIn( ); 


$ wrap. animate( { 
width: opts. wrapw, 
height: opts. wraph 
}, 600 ); 


$ img. animate( { 
marginTop: " — 150px", 
marginLeft: " — 150px" 
}, 600 ); 


$ (".info area", $ this). fadeOut(); 
return false; 


D); 


D); 
D); 


(3) 制作 网 页 文件 index. html, 代 码 如 下 : 


<! DOCTYPE html PUBLIC " — //W3C//DID XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 — transitional. dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 


< head > 
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<meta http — equiv = "Content — Type" content = "text/html; charset =UTF—8" /> 


<title> jQuery 应 用 </title> 

< link rel = "stylesheet" type= "text/css" href = "style.css" /> 
< script type = "text/javascript" src = "js/jquery. js"></script> 
</head> 


<body> 
<div id= "page— wrap"> 
<hl > 江山 四 季 </hl > 


<table><tr> 
<td>< div class = "photo_slider"> 
< img src= "images/spring. jpg"/> 
<div class= "info area"><p> gnbsp;</p> 
<h3> 春 花 </h3> 
</div> 
</div></td> 
<td><div class = "photo_slider"> 
< img src = "images/summer. jpg"/> 
<div class = "info area"><p> &nbsp;</p> 
<h3> 夏 荷 </h3> 
</div> 
</div></td> 
<td><div class = "photo_slider"> 
< img src = "images/autumn. jpg" /> 
<div class= "info area"><p> gnbsp;</p> 
<h3> 秋 叶 </h3> 
</div> 
</div></td> 
<td>< div class = "photo slider"> 
< img src = "images/winter. jpg"/> 
<div class= "info area"><p> gnbsp;</p> 
<h3> 冬 雪 </h3> 
</div> 
</div></td> 
</tr></table> 
</div> 
< script type = "text/javascript" src = "js/photo. js"></script> 
</body> 
</html > 


(4) 编写 CSS 文件 style. css, 代 码 如 下 : 


# { margin: 0; padding: 0; } 
body { font: 62.5% "Gill Sans",Georgia, sans— serif; 
background: url( images/body - bg. jpg) top center repeat — x white; 
} 

p { font- size: 1.2em; line— height: 1.2em; } 

a { outline: none; color: red;} 

a:hover { color: black; } 
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a img { border: none; } 

hl { color: black; font— size: 4.0em; } 
h3 { font- size: 2.0em; margin - bottom: 5px;} 
.Clear { clear: both; } 

井 page 一 wrap { 

margin: 20px; 

padding: 10px; 

} 

a.close { 

position: absolute; 

right: 10px; 

bottom: 10px; 

display: block; 

width: 20px; 

height: 21px; 

background: url( images/close_button. jpg); 
text 一 indent: — 9999px; 

} 

.Photo_slider img { 

width: 100px; 

height: 100px; 

margin 一 bottom: 5px; 
overflow: hidden; 

} 

td { 

vertical ~ align: top; 

} 

.Photo_slider { 

position: relative; 

width: 100px; 

height: 130px; 

padding: 10px; 

border: 1px solid black; 
overflow: hidden; 

margin: 25px 10px 10px 10px; 
background: white; 

float: left; 

} 

.info area { 

display:none; 

} 

.more_info { 

display: block; 

width: 89px; 

height: 26px; 

background: url( images/moreinfo. jpg); 
text - indent: — 9999px; 
cursor: pointer; 


} 


(5) 代码 的 运行 效果 如 图 15-1 所 示 。 
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图 15-1 
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